【发布时间】：2020-04-09 03:08:59
【问题描述】：
vue-chartjs 组件有问题，它是chartjs 的包装器。
问题在于数据不会使用新的传入值自动重绘图表。
基本上我搜索了整个互联网并尝试了所有方法（watchers、mixins、reactiveProp 等），但没有任何效果。
最好的问候。
这是我的代码。
Package.json
"@mdi/font": "^3.6.95",
"chart.js": "^2.9.3",
"core-js": "^3.3.2",
"eslint-loader": "^2.1.2",
"roboto-fontface": "*",
"vue": "^2.6.10",
"vue-chartjs": "^3.5.0",
"vue-resource": "^1.5.1",
"vue-router": "^3.1.3",
"vue-svg-gauge": "^1.2.1",
"vuelidate": "^0.7.4",
"vuetify": "^2.1.10",
"vuex": "^3.1.2"
Chart.vue
<template>
<div class="app">
<v-container fluid>
<v-row>
<v-col cols="12">
<ChartLine v-if="loaded" :chartdata="chartdata" :options="options" />
<v-card>
<v-toolbar color="light-green" dark>
<v-tabs v-model="tabs" background-color="transparent">
<v-tab>A</v-tab>
<v-tab>B</v-tab>
<v-tab>C</v-tab>
<v-tab>D</v-tab>
<v-tab>E</v-tab>
</v-tabs>
</v-toolbar>
<v-tabs-items v-model="tabs">
<v-tab-item>
<div class="small">
<ChartLine :chart-data="dataCollectionHour" :options="options"></ChartLine>
</div>
</v-tab-item>
<v-tab-item>
<div class="small">
<ChartBar :chart-data="dataCollectionDay" :options="options"></ChartBar>
</div>
</v-tab-item>
<v-tab-item>
<div class="small">
<ChartBar :chart-data="dataCollectionWeek" :options="options"></ChartBar>
</div>
</v-tab-item>
<v-tab-item>
<div class="small">
<ChartBar :chart-data="dataCollectionMounth" :options="options"></ChartBar>
</div>
</v-tab-item>
<v-tab-item>
<div class="small">
<ChartBar :chart-data="dataCollectionYear" :options="options"></ChartBar>
</div>
</v-tab-item>
</v-tabs-items>
</v-card>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
import ChartLine from "./ChartLine.vue";
import ChartBar from "./ChartBar.vue";
import config from "../config.json";
export default {
components: {
ChartLine,
ChartBar
},
data() {
return {
timer: null,
tabs: null,
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
},
gridLines: {
display: true
}
}
],
xAxes: [
{
gridLines: {
display: true
}
}
]
},
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
},
dataCollectionHour: {
labels: [],
datasets: [
{
label: "Výstup",
backgroundColor: "#EF9A9A",
borderColor: "#D32F2F",
borderWidth: 3,
data: []
},
{
label: "Síť",
backgroundColor: "#B388FF",
borderColor: "#4A148C",
borderWidth: 3,
data: []
},
{
label: "Solární Energie",
backgroundColor: "#FFF59D",
borderColor: "#FBC02D",
borderWidth: 3,
data: []
},
{
label: "Baterie",
backgroundColor: "#DCEDC8",
borderColor: "#689F38",
borderWidth: 3,
data: []
}
]
},
dataCollectionDay: {
labels: [],
datasets: [
{
label: "Výstup",
backgroundColor: "#EF9A9A",
borderColor: "#D32F2F",
borderWidth: 3,
data: []
},
{
label: "Síť",
backgroundColor: "#B388FF",
borderColor: "#4A148C",
borderWidth: 3,
data: []
},
{
label: "Solární Energie",
backgroundColor: "#FFF59D",
borderColor: "#FBC02D",
borderWidth: 3,
data: []
},
{
label: "Baterie",
backgroundColor: "#DCEDC8",
borderColor: "#689F38",
borderWidth: 3,
data: []
}
]
},
dataCollectionWeek: {
labels: [],
datasets: [
{
label: "Výstup",
backgroundColor: "#EF9A9A",
borderColor: "#D32F2F",
borderWidth: 3,
data: []
},
{
label: "Síť",
backgroundColor: "#B388FF",
borderColor: "#4A148C",
borderWidth: 3,
data: []
},
{
label: "Solární Energie",
backgroundColor: "#FFF59D",
borderColor: "#FBC02D",
borderWidth: 3,
data: []
},
{
label: "Baterie",
backgroundColor: "#DCEDC8",
borderColor: "#689F38",
borderWidth: 3,
data: []
}
]
},
dataCollectionMounth: {
labels: [],
datasets: [
{
label: "Výstup",
backgroundColor: "#EF9A9A",
borderColor: "#D32F2F",
borderWidth: 3,
data: []
},
{
label: "Síť",
backgroundColor: "#B388FF",
borderColor: "#4A148C",
borderWidth: 3,
data: []
},
{
label: "Solární Energie",
backgroundColor: "#FFF59D",
borderColor: "#FBC02D",
borderWidth: 3,
data: []
},
{
label: "Baterie",
backgroundColor: "#DCEDC8",
borderColor: "#689F38",
borderWidth: 3,
data: []
}
]
},
dataCollectionYear: {
labels: [],
datasets: [
{
label: "Výstup",
backgroundColor: "#EF9A9A",
borderColor: "#D32F2F",
borderWidth: 3,
data: []
},
{
label: "Síť",
backgroundColor: "#B388FF",
borderColor: "#4A148C",
borderWidth: 3,
data: []
},
{
label: "Solární Energie",
backgroundColor: "#FFF59D",
borderColor: "#FBC02D",
borderWidth: 3,
data: []
},
{
label: "Baterie",
backgroundColor: "#DCEDC8",
borderColor: "#689F38",
borderWidth: 3,
data: []
}
]
}
};
},
created() {
this.pollData();
},
methods: {
pollData() {
this.timer = setInterval(() => {
if (this.tabs === 0) {
this.$http.get(config.chartActualPower).then(Response => {
this.dataCollectionHour.labels = Response.body.labels;
this.dataCollectionHour.datasets[0].data = Response.body.load;
this.dataCollectionHour.datasets[1].data = Response.body.grid;
this.dataCollectionHour.datasets[2].data = Response.body.pv;
this.dataCollectionHour.datasets[3].data = Response.body.bat;
});
} else if (this.tabs === 1) {
this.$http.get(config.chartDay).then(Response => {
this.dataCollectionDay.labels = Response.body.labels;
this.dataCollectionDay.datasets[0].data = Response.body.load;
this.dataCollectionDay.datasets[1].data = Response.body.grid;
this.dataCollectionDay.datasets[2].data = Response.body.pv;
this.dataCollectionDay.datasets[3].data = Response.body.bat;
});
} else if (this.tabs === 2) {
this.$http.get(config.chartWeek).then(Response => {
this.dataCollectionWeek.labels = Response.body.labels;
this.dataCollectionWeek.datasets[0].data = Response.body.load;
this.dataCollectionWeek.datasets[1].data = Response.body.grid;
this.dataCollectionWeek.datasets[2].data = Response.body.pv;
this.dataCollectionWeek.datasets[3].data = Response.body.bat;
});
} else if (this.tabs === 3) {
this.$http.get(config.chartMounth).then(Response => {
this.dataCollectionMounth.labels = Response.body.labels;
this.dataCollectionMounth.datasets[0].data = Response.body.load;
this.dataCollectionMounth.datasets[1].data = Response.body.grid;
this.dataCollectionMounth.datasets[2].data = Response.body.pv;
this.dataCollectionMounth.datasets[3].data = Response.body.bat;
});
} else if (this.tabs === 4) {
this.$http.get(config.chartYear).then(Response => {
this.dataCollectionYear.labels = Response.body.labels;
this.dataCollectionYear.datasets[0].data = Response.body.load;
this.dataCollectionYear.datasets[1].data = Response.body.grid;
this.dataCollectionYear.datasets[2].data = Response.body.pv;
this.dataCollectionYear.datasets[3].data = Response.body.bat;
});
}
}, 1000);
}
},
beforeDestroy: function() {
clearInterval(this.timer);
}
};
</script>
<style scoped>
.small {
margin: 20px auto;
}
.v-card {
height: 650px;
}
</style>
ChartLine.vue
<script>
import VueCharts from "vue-chartjs";
export default {
extends: VueCharts.Line,
mixins: [VueCharts.mixins.reactiveProp],
props: ["options"],
mounted() {
this.renderChart(this.chartData, this.options);
}
};
</script>
ChartBar.vue
<script>
import VueCharts from "vue-chartjs";
export default {
extends: VueCharts.Bar,
mixins: [VueCharts.mixins.reactiveProp],
props: ["options"],
mounted() {
this.renderChart(this.chartData, this.options);
}
};
</script>
【问题讨论】：
标签： javascript vue.js chart.js vuetify.js vue-chartjs