时间戳

首页 > 解决方案 > 数据更新但图表不更新

vue.js - 数据更新但图表不更新

问题描述

我可以在 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.jschart.jschartkick

解决方案

您可以使用已安装的 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/，他们提供的示例应该为您提供更新图表的好方法。

推荐阅读