使用数组索引 0 更新 chart.js 不起作用

Question

我有一组图表数据对象。我通过传递数组索引并从对象中提取数据来更新图表数据。这适用于除 0.

之外的所有索引

初始化图表时，我加载了 0 索引，并且图表也运行良好，所以我知道这不是该特定索引的数据结构问题。在具有 0 索引的图表上调用更新函数时，我没有收到任何错误。

Here's a codepen 显示它不适用于索引 0。

为什么不更新 0 索引的图表？

Answer 1

更新无效。你应该重新渲染图表

 function resetChart() {
   const ctx = document.getElementById("myChart").getContext("2d");
   window.myChart = new Chart(ctx, chartData[curIndex]);
 }

 window.onload = function() {
  this.resetChart();
 };

function UpdateChart(index) {
  curIndex = index;
  myChart.data.labels = chartData[curIndex].data.labels;
  myChart.data.datasets[0].data = chartData[curIndex].data.datasets[0].data;
  myChart.data.datasets[0].label = chartData[curIndex].data.datasets[0].label;
  myChart.data.datasets[1].data = chartData[curIndex].data.datasets[1].data;
  myChart.data.datasets[1].label = chartData[curIndex].data.datasets[1].label;
  this.resetChart();
}

Answer 2

变化：

window.myChart = new Chart(ctx, chartData[curIndex]);

至

window.myChart = new Chart(ctx, JSON.parse(JSON.stringify(chartData[curIndex])));

原因是您需要克隆对象，否则 myChart 与 chartData[0] 相同，当您单击 1 或 2 时，它会覆盖 0。

这部分代码克隆对象 JSON.parse(JSON.stringify(chartData[curIndex]))

使用数组索引 0 更新 chart.js 不起作用

Updating chart.js with array index 0 doesn't work

javascript

json

chart.js

chartjs-2.6.0