在 vue-chart 中重新渲染图表答案

【问题标题】：rerender chart in vue-chart在 vue-chart 中重新渲染图表
【发布时间】：2017-10-25 19: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。

【问题讨论】：

this._chart 是正确的参考，所以我不确定为什么那时会是 undefined。而且，您也可以使用 reactiveData mixin，它完全符合您的要求：vue-chartjs.org/#/home?id=reactive-data
嗨@thanksd，感谢您的回复。我查看了mixins，但不确定如何在 vue 实例中直接使用它。该示例展示了如何在 vue 组件中使用它。你知道我如何在这里使用 reactiveProp 吗？
只需添加mixins: [ VueChartJs.mixins.reactiveData ],。请注意，它确实需要是reactiveData 而不是reactiveProp，因为您已经在数据对象中定义了chartData，而不是作为传入的prop。示例：jsfiddle.net/fuj4yqke
@thanksd 太好了。我认为这就是我所缺少的技巧。我一直在尝试reactiveProp。它现在工作得很好。如果您不介意将帖子作为答案，我会投票并接受它。文档似乎对此不太清楚。

标签： javascript vue.js vue-chartjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

但是，vue-chartjs 具有一种在相关数据更改时重新渲染图表的内置方法：reactiveData and reactiveProp mixins。通过添加这些 mixin 中的任何一个，对chartData（分别为数据属性或道具）的更改将重新渲染图表以反映更新的数据。

你应该改用reactiveData mixin：

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

【讨论】：