Canvas 绘制复杂数据可视化的色彩配色策略

Canvas数据可视化配色是信息编码而非装饰，需按数据类型选色板：分类用定性色、有序用顺序色、双向用发散色；强调色建立视觉权重，统一色值复用，适配Canvas像素渲染特性，并兼顾色盲友好与语义一致性。

Canvas 绘制复杂数据可视化时，色彩不是装饰，而是信息通道。配色必须服务于数据语义、视觉层次和用户认知，不能凭感觉选色。核心是把颜色当作一种编码方式——不同颜色代表不同数据类型、数值方向或重要性等级。

按数据类型匹配色板

直接套用色板前，先判断数据性质：

1. 分类数据（如国家、产品线、角色）：用定性色板，确保每类有明确、易区分的主色，优先取色板中明度适中、饱和度一致的第6阶色（如orange-6、blue-6、green-6），避免相邻色在色相环上过于接近
2. 有序数值（如销售额、温度、排名）：用顺序色板，同一色系内由浅到深表示从小到大，例如cyan-1 → cyan-5 → cyan-10，注意Y轴翻转后像素坐标与数据逻辑的一致性
3. 双向偏离（如涨跌幅、偏差值、情感得分）：用发散色板，两端用对比色（如blue-8 和 red-8），中间用低饱和灰阶（如gray-4）表示零点或中性值，色阶数量需对称且总梯度数为奇数

突出重点与降低干扰

强调色不是“加亮”，而是建立视觉权重秩序：

1. 将关键数据点（如最高值、目标线、当前周期）设为高饱和强调色（如orange-7），其余同类项统一用低明度基础色（如gray-3）
2. 图例、坐标轴文字、网格线等辅助元素统一使用gray-5，避免抢夺数据图形注意力
3. 同一报告中，相同类别在不同图表里必须复用同一色值（如“华东区”始终用green-6），不因图表类型切换而改变

适配 Canvas 渲染特性

Canvas 是像素级控制，配色需兼顾技术实现细节：

1. 高 DPI 屏幕下，纯色填充比渐变更稳定；若用渐变（如折线下方填充），建议仅限单向顺序色，避免发散色渐变造成视觉混淆
2. 避免在 canvas 上直接写 RGB 字符串，统一用变量管理色值：const COLORS = { good: '#e63946', poor: '#457b9d', neutral: '#a8dadc' };
3. 绘制悬停高亮时，不要临时改 fillStyle，而是预存两套颜色数组，通过索引切换，减少重绘时的计算开销
4. 色盲友好处理：关键对比（如红/绿）需叠加形状差异（圆点 vs 方块）或纹理（斜线填充 vs 网格填充），不能只依赖色相

语义一致性优先于美学偏好

颜色意义一旦约定，就必须严格执行：

1. 表现“优劣”时，red-6 专指正向结果（达标、超额、增长），blue-6 专指负向结果（未达标、缺口、下降），不按“红涨绿跌”机械套用
2. 行业惯例要尊重：金融看板中橙色常代表阿里系，蓝色代表腾讯系；气象图中蓝=冷、红=热，不可颠倒
3. 禁用纯黑（#000）和纯白（#fff）作为数据色——它们明度极端，易造成视觉疲劳；文本用gray-9，背景用gray-1