Javascript 如何在Vuejs中单击每个按钮/选项的日期选择器

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

图表1
图表2
图表3


全部的


6个


3个月


1月


从“Chart.js”导入图表
导出默认值{
数据（）{
返回{
日期：[]，
挑战：[]，
数据：[]，
val1:“全部”
}
},
挂载（）{
这是chartapi（）
},
方法：{
chartapi（类型名称、间隔）{
这个.http.get（`/different/chart/${type_name}？interval=${interval}`）
。然后（（r）=>{
this.date=r.data.date
this.challenge=r.data.challenge
this.data=this.date.map（（日期，索引）=>({
x：新日期（日期*1000），
y:这个.挑战[索引]
}))
const ctx=this.$refs.chart.getContext（'2d'）
新图表（ctx{
键入：“行”，
数据：{
数据集：[
{
标签：“挑战”，
数据：这个数据，
边框颜色：“黑色”，
}
]
},
选项：{
比例：{
雅克斯：[
{
滴答声：{
回调（值）{
返回`${value}%`
}
}
}
],
xAxes：[
{
键入：“时间”，
时间：{
单位：月
}
}
]
}
}
})
})
}
}
}

正如您可以看到我的代码一样，您可以理解，只要单击按钮，就会显示相应的图表

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

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

---

例如，如果chartapi（chart1，3mon），那么它将显示前3个月的chart1数据。但我想要的是，当点击按钮时，它应该显示整个图表数据，如果用户想要查看任何间隔，他可以使用单选按钮，这是日期范围选择。所以我想知道如何将间隔整合到单选按钮中。请务必帮助我。

据我所知，您需要在按钮单击时获取所有数据，然后您将相应地选择单选按钮，并且您希望在更改单选按钮时更改数据。因此，您可以如下更改代码：

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

正如您所看到的，所有单选按钮都是带有

val1的
v-bind
，因此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);
      }
  }

我们使用与数据字段相同的名称创建watcher，它在每次
val1
更改时触发（这意味着当您更改单选按钮时触发）。然后在该观察程序中，当值更改时，我们调用
chartapi
，并将新值
val1
作为第二个参数。这使得图表可以根据所选月份再次加载。
非常感谢您提供的按钮部分，但我想要的是，我有3个按钮，因此每当我单击任何按钮时，都会显示整个图表，即“全部”间隔，如果用户希望更改图表的间隔，他可以通过改变单选按钮来实现这一点，所以现在我想知道如何将图表间隔（如“6个月”、“3个月”和“1个月”）集成到单选按钮，最重要的是，单选按钮必须为任何单击的图表按钮显示。请帮我一下。@app\r据我所知，如果您将all作为chart API方法的第二个参数传递，它将检索整个图表，那么我想您已经得到了答案。因此，在方法
handletnclick
中，每次
val1
更改为
all
so时，单击
，并将其传递给第二个参数。因此，每次单击按钮时，您都会获取所有数据并将单选按钮重置为所有。对于您的第二个需要，在
val1
上有一个watcher，每当您更改单选按钮时，它都会触发。因此，我认为这种情况也得到了解决。您还必须更改all radio以连接与我更改代码相同的v型。Hello@Vikum Dheemantha，我刚刚尝试了您的答案，它工作得非常好，但是当我选择chart1时，我可以看到chart1，间隔为“all”且选中了“all”单选按钮，现在一切正常，但是，如果用户希望更改单选按钮，则图表1必须更改，这意味着最初它将以“全部”间隔显示，因此仅会选中“全部”单选按钮，如果用户更改单选按钮，如选中“6m”，则图表1的间隔必须从“全部”更改为“6m”“间隔。我希望你们能理解，请帮助我。目标：假设点击了chart1，它会显示带有“全部”间隔的图表，所以选中“全部”。如果单选按钮更改为“6m”，则图表1的日期范围必须更改，并且必须分别以“6m”间隔显示图表1，以此类推。但最初，当单击任何图表时，它应该显示“全部”间隔。所以，我想要@点击每个单选按钮，它应该是c
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);
      }
  }