在 vue-chart 中重新渲染图表

Question

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: Cannot read property 'destroy' of undefined

所以 this._chart 似乎不是引用当前图表的正确方法，有人知道这样做的正确方法是什么吗？这个想法来自.

Answer 1

通过 this._chart 可访问的 Chart 对象在调用 renderChart 方法后才会设置。最有可能发生的情况是您的 chartData 在 renderChart 方法被调用之前以某种方式被更新。因此，chartData 的观察者在定义之前引用 this._chart。

但是，vue-chartjs 有一种内置的方法可以在相关数据更改时重新呈现图表：reactiveData and reactiveProp mixins。通过添加这些 mixin 中的任何一个，对 chartData（分别为数据-属性或 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);
  },
});

Answer 2

似乎 this._chart 已移至 this._data._chart，因此例如要使选项具有反应性，请按如下方式添加观察者：

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

在 vue-chart 中重新渲染图表

rerender chart in vue-chart

javascript

vue.js

vue-chartjs