数据更新但图表不更新答案

【问题标题】：Data updating but chart isn't数据更新但图表不更新
【发布时间】：2019-01-18 16:41:53
【问题描述】：

我可以在 Vue 开发工具中看到我的数据对象发生了变化，但图表没有更新。当我在图表上绘制一件事但现在我正在覆盖两个数据集并且图表失去了它的反应性时，这不是问题。

<line-chart :library="chartOptions" v-if="photon.sortedBatch.sorted" :data="photon.sortedBatch.rbChannelOverlay"></line-chart>

这就是 photon.sortedBatch.rbChannelOverlay 的样子

photon.sortedBatch.rbChannelOverlay =   [{name:'R/B Channel Previous Batch Overlay',data:value.sortedBatch.rbChannel},{name:'R/B Channel',data:value.data.rbChannel}]

我将如何更新图表？我可以在添加新数据点时引用图表并调用更新函数吗？

【问题讨论】：

标签： vue.js chart.js chartkick

【解决方案1】：

您可以使用 Vue 函数 mounted 最初使用您拥有的任何数据加载图表。然后使用一种方法，您可以参考图表并进行更新。示例：

  this.chart.data.labels.push(this.count);
  this.chart.data.datasets.forEach((dataset) => {
    dataset.data.push(Math.floor(Math.random() * (75 - 5 + 1)) + 5);
  });

  this.count = this.count + 1;
  this.chart.update();

小提琴示例：https://jsfiddle.net/rogerwes/95ovr71u/39/

否则，我建议您查看https://vue-chartjs.org/，他们提供的示例应该可以为您提供更新图表的好方法。

【讨论】：

图表加载正确我不确定在哪里或如何调用 this.chart.update();因为数据是通过我的 vuex 中的事件侦听器添加的。我正在循环一个名为 photons<swiper-slide v-for="(photon,key) in $store.state.photons" :key='key'> 的对象
查看新更新的 jsfiddle（可能有办法静态地做 jsfiddle 链接不确定），但我用 vuex 商店更新了它。
现在的主要区别是在安装时，标签和数据集被分配了一个计算值，该值返回数据集和标签的存储值。这些会在添加和修改内容时做出反应。

【解决方案2】：

我更新图表的解决方案是将数据保存在临时变量中并清除我的数据变量，然后将其设置为等于我的临时变量。

【讨论】：