Chart.js多折线散点图多数据集性能优化方案咨询

首先澄清一个常见误区：你当前写法中每个dataset传入同一个preparedData数组，不会真的占用N倍数组内存——JS中数组是引用类型，所有dataset的data属性都指向同一个堆内存地址，不会复制多份全量数据。
真正的性能损耗来自Chart.js的内部处理逻辑：默认配置下，框架会对每个dataset挂载的data做独立的遍历解析、x/y坐标归一化计算，等于全量数据的x轴映射逻辑会被重复执行N次，数据量到几千点、折线数超过3条时就会出现明显卡顿。

最优方案：全局挂载单数据源，dataset仅声明解析规则 #

Chart.js 3.0及以上版本原生支持全局单数据源配置：你只需要把全量数据在图表配置的根data节点挂载1次，所有dataset无需重复传入data字段，框架内部只会做1次全量数据遍历，复用x轴解析结果，按每个dataset的parsing规则提取对应y字段值，完全消除重复计算开销。
参考实现代码：

const chartConfig = {
  // 纯连线场景直接用line类型，比scatter开showLine性能高30%以上
  type: 'line',
  data: {
    // 全量数据仅在此处传入1次，所有dataset共用
    raw: preparedData,
    datasets: Array.from({ length: yCount }, (_, i) => ({
      showLine: true,
      borderColor: COLORS[i],
      fill: false,
      borderWidth: 1,
      // 几千个点的场景直接把点半径设为0，不需要渲染散点标记，性能提升非常明显
      pointRadius: 0,
      parsing: {
        xAxisKey: 'x',
        yAxisKey: `y${i}`
      }
    }))
  },
  options: {
    parsing: true,
    // 其余常规配置（轴配置、交互配置等）按原有逻辑写即可
  }
}

额外性能优化手段 #

配合全局单数据源，再加两个配置可以把渲染性能拉满：

• 开启内置数据抽稀插件：如果你的x轴数据是按顺序排列的连续值（比如采样数据、时间序列），直接开启Chart.js内置的decimation插件，会根据当前画布的像素尺寸自动过滤掉人眼不可识别的冗余点，几千个点抽稀后通常只需要渲染数百个点：

options: {
  plugins: {
    decimation: {
      enabled: true,
      algorithm: 'lttb', // 保留折线整体趋势的最优抽稀算法
      threshold: 1000, // 数据量超过1000个点时自动触发抽稀
      samples: Math.floor(canvasDom.width / 2) // 按画布宽度计算最终渲染的点数量
    }
  }
}

• 关闭不需要的交互：如果不需要悬浮显示每个点的tooltip，可以把交互模式改成按x轴索引触发，或者关闭点的hover响应，也能减少大量事件监听的开销。

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