Chart.js创建多个折线图无法独立更新且数据完全相同问题求助

你遇到的问题核心是 JavaScript对象引用共享 导致的，具体原因如下：

• 你在全局作用域仅创建了1个data对象，循环初始化2个lineGraph实例时，都将同一个data的引用传入了构造函数。Chart.js初始化时不会自动深拷贝传入的配置数据，因此两个折线图实例内部的data属性指向同一块内存地址，任意一个实例修改数据集，另一个实例的数据源也会同步变更。
• 定时器的更新逻辑进一步放大了这个现象：每秒触发时先给第一个实例传入索引0更新数据，紧接着给第二个实例传入索引1更新数据，因为两者共享同一份数据源，所以两次更新会叠加覆盖，最终两个图表显示的永远是最后一次更新的结果，看起来就像索引在0和1之间交替。

只需保证每个Chart实例使用独立的数据源即可，最简单的修改方式是在初始化Chart实例时，对传入的data做深拷贝，切断引用共享：

function lineGraph(data, maxDataSize) {
  // 其余原有代码保留
  this.chart = new Chart(this.ctx, {
    type: `line`,
    // 新增深拷贝逻辑，每个实例使用独立数据源
    data: JSON.parse(JSON.stringify(data)),
  })
  // 其余原有代码保留
}

如果你的data里包含函数、正则等JSON无法序列化的内容，可以自己实现递归深拷贝逻辑，或者在循环创建lineGraph实例时每次生成新的data对象。

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