2

我应该如何在 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不是引用当前图表的正确方法，有人知道这样做的正确方法是什么吗？这个想法来自这个堆栈溢出答案。

4

2 回答 2

4

它似乎this._chart已移至this._data._chart，因此例如要使选项具有反应性，请添加一个观察者，如下所示：

watch: {
    options: function() {
        this._data._chart.destroy();
        this.renderChart(this.chartData, this.options);
    }
}
于 2017-10-31T18:09:40.873 回答
2

直到调用方法之后才设置可访问的Chart对象。最有可能发生的情况是，在调用该方法之前，您正在以某种方式进行更新。因此，观察者在它被定义之前正在引用它。this._chartrenderChartchartDatarenderChartchartDatathis._chart

但是，vue-chartjs当依赖数据发生变化时，有一种方法可以重新渲染图表：reactiveData和reactivePropmixins。通过添加这些混合中的任何一个，对chartData（分别是数据属性或道具）的更改将重新渲染图表以反映更新的数据。

您应该改用reactiveDatamixin：

var chartVue = new Vue({
  el: '#chart',
  extends: VueChartJs.Line,
  mixins: [ VueChartJS.mixins.reactiveData ],
  data() {
    return {
      chartData: {...}, 
      options: {...}
    }
  },
  mounted() {
    this.renderChart(this.chartData, this.options);
  },
});
于 2017-10-25T20:23:11.737 回答