Chart.js 更新條形圖的條形

Question

我的網頁上有一個使用 Chart.js 的 BarChart。

我已經使用添加了兩個數據點

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

現在我想更新那些條形 A 和 B 而不刪除它們並再次添加它們（我已經想出了如何做到這一點）。 我希望它們垂直移動以適應它們的新值，但我無法找到如何訪問圖表中已有的數據。

沒有什么像

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

其中第一個值將是存儲數據的索引 (fe)。

我該怎么做？

Answer 1

通常，您希望遍歷您的數據對象，添加、刪除或替換您的元素，然后調用.update ，就是這樣。

這是我在圖表末尾再添加 2 列的示例：

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 添加替換數據示例