Как мне обратиться к диаграмме в экземпляре виртуальной таблицы и уничтожить ее? Я пробовал:
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: Невозможно прочитать свойство "destroy" undefined
Таким образом, кажется, что this._chart
не является правильным способом ссылаться на текущий график, кто-нибудь знает, как правильно это сделать? Идея исходит из этого ответа.
Объект Chart
доступный через this._chart
, не установлен до тех пор, пока не renderChart
метод renderChart
. Скорее всего, это то, что ваши данные chartData
каким-то образом обновляются до того, как был renderChart
метод renderChart
. Таким образом, наблюдатель для chartData
ссылается на this._chart
прежде чем он будет определен.
Тем не менее, vue-chartjs
имеет запеченный способ повторного рендеринга диаграммы, когда изменяются зависимые данные: reactiveData
сигналы и reactiveProp
миксы. Добавляя один из этих миксинов, изменения в chartData
(data-property или prop, соответственно) будут повторно отображать диаграмму для отражения обновленных данных.
Вы должны использовать 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);
},
});
Кажется, что this._chart
был перемещен в this._data._chart
, так, например, чтобы сделать варианты реактивными, добавьте наблюдателя следующим образом:
watch: {
options: function() {
this._data._chart.destroy();
this.renderChart(this.chartData, this.options);
}
}
this._chart
- правильная ссылка, поэтому я не уверен, почему она будетundefined
в этот момент. Но вы также можете просто использовать миксинreactiveData
, который делает именно то, что вы пытаетесь сделать: vue-chartjs.org/#/home?id=reactive-datamixin
но не уверен, как использовать его непосредственно в VUE. В примере показано, как использовать его в компоненте vue. У вас как, как я могу использовать реактивныйПроп здесь?