如何在 Chart.js 散点图中根据 Y 值动态设置数据点颜色-js教程

本文详解如何在 chart.js 的 scatter 图表中，为每个数据点（dot）按其 y 值区间（如 y ≤ 0、0 4）动态分配不同背景色，通过预计算颜色数组并赋值给 `backgroundcolor` 实现精准着色。

在 Chart.js 中，散点图（type: ‘scatter’）的数据点默认使用统一颜色。若需实现「颜色随数值变化」的视觉编码（例如：负值标红、低正值标蓝、高值标紫），关键在于将 backgroundColor 属性设为与数据点一一对应的颜色数组，而非单一字符串。

Chart.js 会自动将该数组中的每个颜色项映射到 data 数组中对应索引的数据点上——这是实现条件着色最简洁、高效的方式。

✅ 正确实现步骤

1. 准备原始数据（如站点与对应数值）；
2. 基于 y 值生成颜色数组：使用 .map() 遍历数据，根据业务逻辑返回对应颜色；
3. 将颜色数组传入 dataset.backgroundColor；
4. 确保 x 轴类型为 ‘category’ 并显式传入 labels（因散点图默认不自动解析字符串 x 值为分类轴）。

以下是完整可运行示例：