Chart.js中两个图表共用同一数据集是否会同步发生变更？

问题答案 #

核心结论 #

两个图表会共享你传入的data对象，修改该对象的内容会同时影响两个图表的展示。

具体原因 #

JavaScript中对象属于引用类型，你两次初始化Chart实例时，传入的data参数是同一个对象的内存引用，而非独立的深拷贝副本。Chart.js默认不会对传入配置里的data做额外的深克隆存储，两个实例都会直接绑定你外部声明的这个data对象。

你修改data里的labels、数据集数值后，只要分别调用两个图表实例的update()方法触发重绘，两个图表都会同步展示修改后的内容，不需要分别修改两个实例内部的data。

不需要共享data的处理方案 #

如果希望两个图表的data完全独立，每次初始化Chart时传入深拷贝后的data对象即可，示例写法：

// 写法1：用structuredClone做深拷贝（支持大部分常规数据结构）
new Chart(this.ctx1, {
  type: 'line',
  data: structuredClone(data),
})
new Chart(this.ctx2, {
  type: 'line',
  data: structuredClone(data),
})

// 写法2：简单结构用JSON序列化反序列化实现深拷贝
new Chart(this.ctx, {
  type: 'line',
  data: JSON.parse(JSON.stringify(data)),
})

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