问题描述
我正在尝试通过点击按钮来显示图表，我使用了 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>
这里我无法通过单击按钮显示图表，但如果我只是直接显示没有按钮的图表，那么我可以通过单选按钮显示图表并更改它们的时间间隔。
所以请有人帮我在按钮点击时显示图表，我的图表 ID 分别为 1、2 和 3。我想在加载页面或刷新页面时选中“全部”单选按钮来显示图表 1，请帮助我这样做。
目标：要在按钮点击时显示图表，假设我点击了图表 2，那么图表 2 必须显示，如果用户希望更改图表的时间间隔，他可以通过更改单选按钮来实现。那么如何以正确的方式做到这一点。
解决方法
有很多方法可以解决这个问题，我将解释一个简单的方法：
使用变量和 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 添加到数据函数中。