Vue Chart.js - 数据更改时图表不会更新 [英] Vue Chart.js - Chart is not updating when data is changing
问题描述
我正在使用Vue.js和Chart.js绘制一些图表。
每次调用函数 generateChart（）时，图表都不会自动更新。当我检查 VueDevTools 中的数据时，它们是正确的，但图表不代表那些。
I'm using Vue.js and Chart.js to draw some chart.
Each time I call the function generateChart(), the chart is not updated automatically. When I check the data in the VueDevTools, they are correct but the chart does not represent those.
有趣的事实：当我调整窗口大小时，图表正在更新。
Fun fact : The chart is updating when I'm resizing the window.
- 我在做什么有什么问题？
- 每次打电话时如何更新图表
generateChart（）？
- What is wrong with what I'm doing ?
- How to update the chart each time I'm calling
generateChart()?
我觉得这将与对象和数组更改检测警告，但我不知道该怎么做。
I feel this is going to be something related with object and array changes detection caveat, but I'm not sure what to do.
https://codepen.io/anon/pen/bWRVKB?editors=1010
<el-dialog title="Chart" v-model="showGeneratedChart">
<line-chart :chartData="dataChart"></line-chart>
</el-dialog>
export default{
data (){
const self = this;
return {
dataChart : {
labels : [],
datasets: [{
label: 'label',
backgroundColor: '#FC2525',
data: [0, 1, 2, 3, 4],
}]
}
}
}
generateChart() {
this.dataChart['labels'] = [];
this.dataChart['datasets'] = [];
... compute datasets and formattedLabels
this.dataChart['labels'] = formattedLabels;
this.dataChart['datasets'] = datasets;
}
LineChart.js
LineChart.js
import { Line, mixins } from 'vue-chartjs'
export default Line.extend({
mixins: [mixins.reactiveProp],
props: ["options"],
mounted () {
this.renderChart(this.chartData, this.options)
}
})
推荐答案
对图表数据使用计算属性。而不是在监视时调用 this.renderChart 将其包装在方法中并在已挂载和<$中重用该方法c $ c>观看。
Use a computed property for the chart data. And instead of calling this.renderChart on watch wrap it in a method and reuse that method on mounted and in watch.
Vue.component("line-chart", {
extends: VueChartJs.Line,
props: ["data", "options"],
mounted() {
this.renderLineChart();
},
computed: {
chartData: function() {
return this.data;
}
},
methods: {
renderLineChart: function() {
this.renderChart(
{
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
datasets: [
{
label: "Data One",
backgroundColor: "#f87979",
data: this.chartData
}
]
},
{ responsive: true, maintainAspectRatio: false }
);
}
},
watch: {
data: function() {
this._chart.destroy();
//this.renderChart(this.data, this.options);
this.renderLineChart();
}
}
});
var vm = new Vue({
el: ".app",
data: {
message: "Hello World",
dataChart: [10, 39, 10, 40, 39, 0, 0],
test: [4, 4, 4, 4, 4, 4]
},
methods: {
changeData: function() {
this.dataChart = [6, 6, 3, 5, 5, 6];
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vue.jS Chart</title>
</head>
<body>
<div class="app">
{{ dataChart }}
<button v-on:click="changeData">Change data</button>
<line-chart :data="dataChart" :options="{responsive: true, maintainAspectRatio: false}"></line-chart>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@2.5.7-rc3/dist/vue-chartjs.full.min.js"></script>
</body>
</html>
您还可以将选项设为计算属性，如果选项不打算改变很多你可以设置默认道具。 https://vuejs.org/v2/guide/components.html#Prop-Validation
You could also make the options a computed property, and if option not going to change much you can setup default props. https://vuejs.org/v2/guide/components.html#Prop-Validation
这是一个正常工作的代码 https://codepen.io/azs06/pen/KmqyaN?editors=1010
Here is a working codepen https://codepen.io/azs06/pen/KmqyaN?editors=1010
这篇关于Vue Chart.js - 数据更改时图表不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
