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

11dmarpk 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(245)

我可以看到我的数据对象在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}]

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

chart.js

来源：https://stackoverflow.com/questions/54258155/data-updating-but-chart-isnt

2条答案

按热度按时间

new9mtju1#

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

赞(0）回复(0）举报 2022-11-06

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

赞(0）回复(0）举报 2022-11-06

我来回答

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

2条答案

相关问题

热门标签

最新问答