rerender chart in vue-chart

Question

Wie soll ich auf das Diagramm in einer Vue-Chart-Instanz verweisen und es zerstören? Ich habe versucht:

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(); 
    } 
    } 
}); 

Aber es klagt

TypeError: Cannot read property 'destroy' of undefined

So scheint es this._chart ist nicht der richtige Weg, um die aktuellen Chart zu beziehen, jeder weiß, was der richtige Weg ist, dies zu tun? Die Idee kommt von this stack overflow answer.

Answer 1

Das Objekt Chart, auf das über this._chart zugegriffen werden kann, wird erst eingestellt, nachdem die Methode renderChart aufgerufen wurde. Was am wahrscheinlichsten passiert, ist, dass Ihre chartData irgendwie aktualisiert wird, bevor diese renderChart Methode aufgerufen wurde. Der Wächter für chartData verweist also auf this._chart, bevor er definiert wurde.

Allerdings hat vue-chartjs eine eingebrannte Möglichkeit, das Diagramm neu zu rendern, wenn sich die abhängigen Daten ändern: reactiveData and reactiveProp mixins. Wenn Sie eines dieser Mixins hinzufügen, werden die Änderungen an der chartData (Dateneigenschaft bzw. Prop) das Diagramm erneut rendern, um die aktualisierten Daten wiederzugeben.

sollten Sie verwenden die reactiveData mixin statt:

var chartVue = new Vue({ 
    el: '#chart', 
    extends: VueChartJs.Line, 
    mixins: [ VueChartJS.mixins.reactiveData ], 
    data() { 
    return { 
     chartData: {...}, 
     options: {...} 
    } 
    }, 
    mounted() { 
    this.renderChart(this.chartData, this.options); 
    }, 
}); 

Answer 2

Es scheint this._chart zu this._data._chart bewegt wurde, so zum Beispiel die Optionen reaktiv zu machen, einen Beobachter wie folgt hinzufügen:

watch: { 
    options: function() { 
     this._data._chart.destroy(); 
     this.renderChart(this.chartData, this.options); 
    } 
}