Блог

Я пытаюсь отображать диаграммы с помощью нажатий кнопок, я использовал 3 кнопки, а также 4 переключателя, как показано на рисунке ниже.

На самом деле я вызываю API и извлекаю данные оттуда. Я пытаюсь передать значение в функции, а затем пытаюсь использовать то же значение при нажатии кнопки.

Вот мой код:

 <template>
  <div id="Displaying charts through buttons">
    <div class="buttons" style="float:left">
    <vs-button color="warning" @click="change('1')"> chart1</vs-button>
    <vs-button color="warning" @click="change('2')"> chart2</vs-button>
    <vs-button color="warning" @click="change('3')"> chart3</vs-button>
    </div>
    <ul class="radio" style=" float:right;">
      <li>
        <vs-radio  @change="period"  vs-value="all" val1="all">all</vs-radio>
      </li>
      <li>
        <vs-radio  @change="period" vs-value="6mon"  >6mon</vs-radio>
      </li>
      <li>
        <vs-radio  @change="period"  vs-value="3mon" >3mon</vs-radio>
      </li>
      <li>
        <vs-radio  @change="period" vs-value="1mon" >1mon</vs-radio>
      </li>
    </ul>
    <div class="chart-container">
      <charts-line :height="250"  :data="datacoll" :options="options"></charts-line>
    </div>
  </div>
</template>

<script>
import ChartsLine from './ChartsLine'
export default {
  components: {'charts-line' : ChartsLine},
  data () {
    return {
      datacoll: {},
      options: {
        scales: {
          yAxes: [
            {
              scaleLabel: {
                display: false
              },
              ticks: {
                callback (value) {
                  return `${value}k`
                }
              }
            }
          ],
          xAxes: [
            {
              type: 'time',
              time: {
                unit: 'month'
              },
              scaleLabel: {
              }
            }
          ]
        }
      },
      date: [],
      challenge: [],
      data: [],
      val1: 'all'
    }
  },
  mounted () {
    this.change()
  },
  methods: {
    change (id) {
      this.$http.get(`/apidata/real/${ id}`)
        .then(res => {
          this.date = res.date
          this.challenge = res.challenge
          this.data = this.date.map((date, index) => ({
            x: new Date(date * 1000),
            y: this.challenge[index]
          }))
          this.filldata(this.data)
        })
    },
    filldata (data) {
      this.datacoll = {
        datasets: [
          {
            data
        ],
        options: this.options
      }
    },

    period (event) {
      const period = event.target.value
      let minValue = new Date(Math.max(...this.date) * 1000)
      const axisXMin = new Date(Math.min(...this.date) * 1000)

      switch (period) {
        case '1m':
          minValue.setMonth(minValue.getMonth() - 1)
          break
        case '3m':
          minValue.setMonth(minValue.getMonth() - 3)
          break
        case '6m':
          minValue.setMonth(minValue.getMonth() - 6)
          break
        default:
          minValue = axisXMin
      }
      const data = this.data.filter(el => {
        return el.x >= minValue
      })
      this.filldata(data)
    }
  }
}
</script>
 

Здесь я не могу отображать диаграммы нажатием кнопки, но если я просто отображаю диаграмму напрямую без кнопок, тогда я могу отображать диаграммы и изменять их временной интервал с помощью переключателей.

Итак, кто-нибудь, пожалуйста, помогите мне отображать графики при нажатии кнопки, мой идентификатор диаграммы равен 1, 2 и 3 соответственно. И я хочу отобразить диаграмму1 с включенным переключателем «все» при загрузке страницы или при обновлении страницы, пожалуйста, помогите мне в этом.

Цель: Для отображения графиков при нажатии кнопки, предположим, я нажал chart2, затем chart2 должен отображаться, если пользователь хочет изменить временной интервал диаграммы, он может сделать это, изменив переключатели. Итак, как сделать это правильно.

Существует довольно много способов сделать это, я объясню простой:

Использование переменной и v-if для переключения видимости диаграмм*:

     <div class="chart-container" v-if="selectedChart > ''">
      <charts-line :height="250"  :data="datacoll" :options="options"></charts-line>
    </div>
 

*) технически он не переключает его видимость, он переключает его существование. v-show переключает видимость. v-if решает, будет ли узел добавлен в DOM (и создает все его дочерние элементы и т. Д.).

Это гарантирует, что отображается только одна диаграмма, когда selectedChart имеет значение. При нажатии кнопки вы должны скрыть отображаемую в данный момент диаграмму (возможно, отобразить сообщение о загрузке), затем вы загружаете запрошенные данные. После загрузки данных вы устанавливаете this.selectedChart на соответствующую диаграмму.

пример:

 change (id) {
      this.selectedChart = null; // Makes the current displayed chart `disappear`

      this.$http.get(`/apidata/real/${ id}`)
        .then(res => {
          this.date = res.date
          this.challenge = res.challenge
          this.data = this.date.map((date, index) => ({
            x: new Date(date * 1000),
            y: this.challenge[index]
          }))
          this.filldata(this.data)
          this.selectedChart = id;
        })

    },
 

Не забудьте добавить selectedChart: null функцию данных.