javascript - Chart.js 更新条形图的条形

Question

我的网页上有一个使用 Chart.js 的条形图。

我使用添加了两个数据点

chart.addData([5], "A");
chart.addData([7], "B");

现在我想更新这些栏 A 和 B，而不删除它们并再次添加它们(我已经知道如何做到这一点)。我希望它们垂直移动以适应新值，但我不知道如何访问图表中已有的数据。

没有什么比

chart.updateData(0,[6]);
chart.updateData(1,[9]);

其中第一个值是存储数据的索引(f.e)。

我应该怎么做？

Answer 1

一般来说，您想要浏览数据对象，添加、删除或替换元素，然后调用 .update ，就是这样。

下面是我在图表末尾添加两列的示例:

function addData() {
  myBarChart.data.labels[12] ="2017";
  myBarChart.data.labels[13] ="2018";
  myBarChart.data.datasets[0].data[12] = 500;
  myBarChart.data.datasets[0].data[13] = 600;
  myBarChart.update();
}

更具体地说，针对您的情况，我在这里修改了一年的值:

function adjust2016() {
  myBarChart.data.datasets[0].data[11] = 300;
  myBarChart.update();
}

完整示例:

Codepen Chart.js Add replace data example