Chart.js问题：更新Chart 0的Labels时Chart 1的Labels同步更新

这个问题的核心是两个图表的labels数组指向了同一个内存引用。JavaScript里数组属于引用类型，当你把同一个数组对象同时赋值给两个图表的data.labels时，修改其中一个数组的内容，另一个因为指向同一块内存，自然会同步变化。

解决步骤： #

1. 初始化时避免复用数组

创建图表的时候，给每个图表分配独立的labels数组，不要共用同一个：

// 错误写法（共用数组）
const commonLabels = [1, 2, 3];
const chartRpm = [
  new Chart(ctx0, { data: { labels: commonLabels } }),
  new Chart(ctx1, { data: { labels: commonLabels } })
];

// 正确写法（独立数组）
const chartRpm = [
  new Chart(ctx0, { data: { labels: [1, 2, 3] } }),
  new Chart(ctx1, { data: { labels: [1, 2, 3] } })
];

// 或者基于基础数组拷贝生成独立数组
const baseLabels = [1, 2, 3];
const chartRpm = [
  new Chart(ctx0, { data: { labels: [...baseLabels] } }), // 展开运算符拷贝
  new Chart(ctx1, { data: { labels: baseLabels.slice() } }) // slice方法拷贝
];

2. 已初始化图表的修复方案

如果图表已经创建完成，现在要断开引用关系，只需要把其中一个图表的labels替换为原数组的拷贝即可：

// 给Chart 1的labels创建独立拷贝
chartRpm[1].data.labels = [...chartRpm[1].data.labels];

// 此时再更新Chart 0的labels就不会影响Chart 1了
chartRpm[0].data.labels.push(0);

修复后再执行你原来的打印代码，就能看到两个图表的labels不再同步变化了。

内容的提问来源于stack exchange，提问作者vitoto9010