在 chart.js 散点图中，可通过为 `dataset.backgroundcolor` 提供与数据点一一对应的颜色数组，实现每个点根据其 y 值（如 ≤0 红色、0–4 蓝色、＞4 紫色）自动染色。
要让散点图中的每个数据点（dot）颜色随其 Y 值动态变化，核心思路是：不使用单一颜色值，而是传入一个长度与数据点数量一致的颜色数组，并确保该数组中每一项的颜色由对应数据对象的 y 值通过条件逻辑计算得出。
Chart.js 会自动将 backgroundColor 数组中的第 i 个颜色应用到 data[i] 对应的点上——这正是实现“值驱动配色”的关键机制。
以下是一个完整、可直接运行的示例代码：
? 注意事项与最佳实践：
- ✅ backgroundColor 必须是数组（如 ['#f00', '#0f0', '#00f']），不可写成单色字符串（如 '#36a2eb'），否则所有点将统一着色；
- ✅ 颜色数组长度必须与 data 数组完全一致，否则未匹配的点将回退至默认色或渲染异常；
- ✅ 若后续需动态更新颜色（如响应用户交互），请调用 chart.data.datasets[0].backgroundColor = newArray 后执行 chart.update()；
- ✅ 推荐为边界条件（如 y === 0）明确定义归属区间，避免逻辑漏洞（本例中 y
- ✅ 如需支持更多阈值（如四段色阶），可扩展 if-else if-else 或改用查找表（colorMap 对象）提升可维护性。
通过这一模式，你不仅能实现基础的三色分段，还可轻松拓展为温度热力映射、状态分级标识（正常/警告/错误）、甚至结合 HSL 动态生成渐变色——真正释放 Chart.js 的可视化表达潜力。
