ChartJS 数据正在更新,但图表未更新

11dmarpk  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(275)

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

<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}]

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

new9mtju

new9mtju1#

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

o2rvlv0m

o2rvlv0m2#

您可以使用所安装的Vue函数来初始加载图表中的任何数据。然后使用一种方法来引用图表并进行更新。例如:

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/,他们提供的示例应该会给予你一个更新图表的好方法。

相关问题