vue-图表中的重发图
提问于 2017-10-25 11:17:14
我应该如何引用vue图表实例中的图表并销毁它？我试过：
var chartVue = new Vue({
el: '#chart',
extends: VueChartJs.Line,
data: {
chartData: {...},
options: {...}
},
mounted() {
this.renderMyChart()
},
methods: {
renderMyChart: function() {
this.renderChart(
this.chartData,
this.options
);
}
},
watch: {
chartData: function() {
this._chart.destroy();
this.renderMyChart();
}
}
});但它会抱怨
TypeError:无法读取未定义的属性“破坏”
因此，this._chart似乎不是引用当前图表的正确方式，有人知道什么是正确的方法吗？这个想法来自this stack overflow answer。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-10-25 12:23:11
在调用Chart方法之后，才会设置通过this._chart访问的renderChart对象。最有可能发生的情况是，在调用该chartData方法之前，您的renderChart正以某种方式被更新。因此，chartData的观察者在定义this._chart之前正在引用它。
然而，当依赖的数据发生变化时，vue-chartjs有一种可以重新呈现图表的方式： mixins。通过添加这两个混合体中的任何一个，对chartData (数据属性或支柱)的更改将重新呈现图表以反映更新的数据。
您应该使用reactiveData混联器来代替：
var chartVue = new Vue({
el: '#chart',
extends: VueChartJs.Line,
mixins: [ VueChartJS.mixins.reactiveData ],
data() {
return {
chartData: {...},
options: {...}
}
},
mounted() {
this.renderChart(this.chartData, this.options);
},
});Stack Overflow用户
发布于 2017-10-31 10:09:40
this._chart似乎已经转移到this._data._chart，因此，例如，为了使选项具有反应性，添加一个观察者如下：
watch: {
options: function() {
this._data._chart.destroy();
this.renderChart(this.chartData, this.options);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46940450
复制
腾讯云开发者
