如何在 Vuejs 中点击每个 button/option 的日期选择器

Question

我是Vuejs新手，用过3个按钮，分别是chart1、chart2、chart3。因此，每当我单击任何按钮时，我都希望显示单选类型的日期选择。如下所示：

我想做的是，我正在尝试显示图表，每当单击按钮时，无论单击哪个按钮，我都想显示日期选择。

这是我的尝试方式：

<template>
  <div class="Different charts">
    <div class="buttons" >
      <vs-button color="warning" size="small" @click="chartapi(chart1, all)">Chart1</vs-button>
      <vs-button color="warning" size="small" @click="chartapi(chart2, all)" >Chart2</vs-button>
      <vs-button color="warning" size="small" @click="chartapi(chart3, all)">Chart3</vs-button>
    </div>
      <ul class="demo-alignment ">
        <li>
          <vs-radio id="all" color="warning" vs-name="options" vs-value="all" v-model="radios2" >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'
    }
  },
  mounted () {
    this.chartapi()
  },
  methods: {
    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'
                    }
                  }
                ]
              }
            }
          })
        })
    }
  }
}
</script>

正如您看到我的代码，您可以理解无论何时单击按钮，都会显示相应的图表

并且我在用于指定日期范围选择的值的方法中使用了时间间隔。

我的问题是如何显示所有选项（按钮）的日期范围选择以及如何在单选按钮中指定间隔。

例如，如果 chartapi(chart1, 3mon) 则显示前 3 个月的 chart1 数据。但我想要的是单击按钮时它应该显示整个图表数据，如果用户想查看任何间隔，他可以使用单选按钮，即日期范围选择。所以我想知道如何将间隔集成到单选按钮中。请帮帮我。

Answer 1

据我所知，您需要在单击按钮时获取所有数据，然后您将相应地 select 单选按钮，并且您想在更改单选按钮时更改数据。所以你可以改变代码如下，

<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>

我所做的改变是，

添加单独的数据filed/variable以分配图表类型
创建一个单独的方法来触发相应地更改 type 变量的按钮，并将 val1 更改回全部。
创建观察者以观察 val1 和如果 val1 改变分别加载图表。

更新

由于你不清楚 watcher 是如何工作的，我们可以在 vue 中创建 watchers 作为一种特殊的函数，它会在相关数据字段更新时触发。

首先，我们将单选按钮绑定到 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 的值根据 selected 单选按钮而变化。（全部，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 的新值作为第二个参数。这使得图表根据 selected 月份再次加载。

如何在 Vuejs 中点击每个 button/option 的日期选择器

How to have Date selector for every button/option clicked in Vuejs

javascript

button

radio

vue.js