Я новичок в Vuejs, я использовал 3 кнопки: chart1, chart2 и chart3 соответственно. Поэтому всякий раз, когда я нажимаю любую кнопку, я хочу, чтобы отображался выбор даты, который находится в радио-типе. ...

0
app_er 3 Янв 2021 в 09:08

1 ответ

Лучший ответ

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

<template>
  <div class="Different charts">
    <div class="buttons" >
      <vs-button color="warning" size="small" @click="handleBtnClick(chart1)">Chart1</vs-button>
      <vs-button color="warning" size="small" @click="handleBtnClick(chart2)" >Chart2</vs-button>
      <vs-button color="warning" size="small" @click="handleBtnClick(chart3)">Chart3</vs-button>
    </div>
      <ul class="demo-alignment ">
        <li>
          <vs-radio id="all" color="warning" vs-name="options" vs-value="all" v-model="val1" >All</vs-radio>
        </li>

        <li>
          <vs-radio id="6mon" color="warning"  vs-name="options" vs-value="6mon" v-model="val1">6mon</vs-radio>
        </li>
        <li>
          <vs-radio id="3mon" color="warning"  vs-name="options" vs-value="3mon" v-model="val1">3mon</vs-radio>
        </li>
        <li>
          <vs-radio id="1mon" color="warning"  vs-name="options" vs-value="1mon" v-model="val1">1mon</vs-radio>
        </li>
      </ul>
  <div class="chart-container"> 
  <canvas id="chart"></canvas>
  </div>
  </div>
</template>

<script>
import Chart from 'chart.js'
export default {
  data () {
    return {
      date: [],
      challenge: [],
      data: [],
      val1: 'all',
      type: 'chart1'
    }
  },
  mounted () {
    this.chartapi(type, val1);
  },
  methods: {
      handleBtnClick: (chart) => {
          /* This is a method to use in button click */
          this.type = chart;
          this.val1 = 'all' // Assigning 'all' as initial value for each chart
          this.chartapi(this.type, this.val1);
      },
    chartapi (type_name, interval) {
      this.$http.get(`/different/chart/${ type_name  }?interval=${  interval}`)
        .then((r) => {
          this.date = r.data.date
          this.challenge = r.data.challenge
          this.data = this.date.map((date, index) => ({
            x: new Date(date * 1000),
            y: this.challenge[index]
          }))

          const ctx = this.$refs.chart.getContext('2d')
          new Chart(ctx, {
            type: 'line',
            data: {
              datasets: [
                {
                  label: 'Challenge',
                  data: this.data,
                  borderColor: 'black',
                }
              ]
            },
            options: {
              scales: {
                yAxes: [
                  {
                    ticks: {
                      callback (value) {
                        return `${value}%`
                      }
                    }
                  }
                ],
                xAxes: [
                  {
                    type: 'time',
                    time: {
                      unit: 'month'
                    }
                  }
                ]
              }
            }
          })
        })
    }
  },
  watch: {
      /* You can write a watcher for listen the changes of the radio button */
      val1:(prevValue, newValue) => {
          /* This method triggers everytime you change the value of val1 */
          this.chartapi(this.type, newValue);
      }
  }
}
</script>

Изменения, которые я сделал, были,

  1. Добавьте отдельное поле данных / переменную, чтобы назначить тип диаграммы
  2. создайте отдельный метод для запуска кнопок, которые изменяют переменную type соответствующим образом и изменяют val1 обратно на все.
  3. Создайте наблюдатель, чтобы отслеживать val1 и если val1 изменяет загрузку диаграммы соответственно.

Обновить

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

Сначала мы привязываем наши переключатели к полю данных val1 следующим образом.

<ul class="demo-alignment ">
        <li>
          <vs-radio id="all" color="warning" vs-name="options" vs-value="all" v-model="val1" >All</vs-radio>
        </li>

        <li>
          <vs-radio id="6mon" color="warning"  vs-name="options" vs-value="6mon" v-model="val1">6mon</vs-radio>
        </li>
        <li>
          <vs-radio id="3mon" color="warning"  vs-name="options" vs-value="3mon" v-model="val1">3mon</vs-radio>
        </li>
        <li>
          <vs-radio id="1mon" color="warning"  vs-name="options" vs-value="1mon" v-model="val1">1mon</vs-radio>
        </li>
      </ul>

Как вы можете видеть, все переключатели - v-bind с val1, поэтому значение val1 изменяется в соответствии с выбранным переключателем. (все, 6 мес., 3 мес., 1 мес.).

Затем мы создаем погоду для val1 как следующий код.

watch: {
      /* You can write a watcher for listen the changes of the radio button */
      val1: (prevValue, newValue) => {
          /* This method triggers everytime you change the value of val1 */
          this.chartapi(this.type, newValue);
      }
  }

Мы создаем наблюдатель с тем же именем, что и поле данных, и он срабатывает каждый раз, когда изменяется val1 (это означает, что он срабатывает при изменении переключателя). затем внутри этого наблюдателя при изменении значения мы вызываем chartapi с новым значением val1 в качестве второго параметра. что заставляет график загружаться снова в соответствии с выбранным месяцем.

1
Vikum Dheemantha 4 Янв 2021 в 17:00