Question

我可以在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}]

我将如何更新图表？添加新数据点时是否可以参考图表并调用更新函数？

Answer 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/，他们提供的示例应为您提供一种更新图表的好方法。

Answer 2

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

数据更新但图表不是

2 个答案: