javascript - 数据更新时Vue Chart JS重新渲染图表

Question

我正在构建一个 Nuxt JS 前端，其中包含 Vue Chart JS 和一个 API，它每 X 秒获取一次数据并将数据保存到 Nuxt JS 存储。但是，在我的图表渲染后，尽管数据更新正确，但我似乎无法可靠地重新渲染图表。

我有一个插件，LineChart.js其中包括我的图表：

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

Chart.defaults.global.legend.display = false;
Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = true;

export default {
  extends: Line,
  mixins: [reactiveProp],
  data () {
    return {
      localData: null
    }
  },
  mounted () {
    this.localData = this.chartData

    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.localData)
  },
  watch: {
    chartData: {
      handler: function (val, oldVal) {
        this.localData = val
      },
      deep: true
    }
  }
}

我想通过添加一个观察者，chartData我至少可以找出我的数据何时发生变化，而且确实如此。

我尝试在我的handler函数内销毁并重新渲染图表，但这会导致无限循环。this.chartData确实更新了，我只需要重新渲染图表。

标签： javascriptvue.jschartsvuejs2nuxt.js