如何解决VueJS - 如何通过单击按钮显示图表以及最初如何在 vue-chartjs 中的页面加载期间显示图表 1
我正在尝试通过点击按钮来显示图表,我使用了 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
添加到数据函数中。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。