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

Question

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

初始化图表时，我加载了0索引，图表也能正常工作，所以我知道这不是该特定索引的数据结构问题。 在使用0索引调用图表上的更新函数时，我没有收到任何错误。

这是一个代码笔，显示它不适用于索引 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]))