数据可视化系统 是做什么的？
目的
数据可视化系统提供了一种方法，用于设计位于单个指标之上的图表和图形。它确保定量关系——例如随时间变化的趋势、类别间的比较以及数值分布——能够清晰、准确且无障碍地传达。该系统通过建立图表选择、视觉标准化、无障碍色彩编码和响应式重排的规则，来防止“视觉噪音”和认知过载。
使用场景
- SaaS仪表盘： 可视化用户增长、收入趋势或系统性能。
- 财务报告： 展示投资组合分布、费用类别或市场波动。
- 分析平台： 显示流量来源、转化漏斗或行为群组。
- 影响力和可持续性报告： 可视化随时间变化的环境指标或社会影响数据。
- 健康和健身应用： 追踪生命体征、活动水平或目标进度。
何时不使用
- 单一高影响力数字： 对于孤立的KPI（例如“总营收：10,000美元”），请使用
metric-and-statistic-system。 - 原始多属性数据： 如果用户需要跨多个列读取20个以上项目的具体数值，请使用
data-table-ui-system。 - 纯装饰性信息图： 当目标是艺术表达或叙事故事，且图形是非动态、非数据驱动的时候。
- 分步状态： 对于线性流程（例如“第2步，共4步”），请使用
step-progress-system。
输入
- 用户目标： 用户试图理解什么？（比较、趋势、分布或部分与整体）。
- 数据类型： 数据是分类的（例如“浏览器类型”）、时序的（例如“按月份销售额”）还是定量的（例如“价格与质量”）？
- 基数： 需要同时显示多少个项目或系列？
- 设备约束： 目标视口和交互模式（触屏与鼠标）。
- 品牌令牌： 来自父设计系统的调色板、排版和间距。
输出
- 图表选择映射： 根据目标和数据选择的图表类型（折线图、条形图、饼图、散点图）。
- 无障碍色彩规范： 一个对色盲用户（红色盲、绿色盲、蓝色盲）仍然可区分的调色板。
- 图表解剖与标注规范： 关于轴标题、图例、工具提示和数据标记的规则。
- 响应式过渡映射： 图表如何从桌面端适配到移动端（例如，方向变化、数据简化）。
工作流程
1. 确定沟通目标
在选择图表之前，明确数据应“说明”什么：
- 随时间变化的趋势： 使用折线图或面积图。
- 类别间的比较： 使用条形图（垂直或水平）。
- 部分与整体的关系： 使用环形图或树图（对于超过3个类别，避免使用标准饼图）。
- 相关性/分布： 使用散点图或直方图。
2. 选择并规范化图表类型
应用“数据真实性”规则以确保准确性：
- 零基线规则： 条形图的值轴必须从零基线开始，以避免夸大差异。
- 宽高比规则： 对于折线图，保持平衡的宽高比（通常为2:1或3:2），以免人为地使斜率变陡或变平。
- 最小化几何： 移除不必要的“图表垃圾”，如3D效果、重网格线或不传达数据的阴影。
3. 建立视觉层次和标注
将visual-hierarchy-system应用于图表组件：
- 直接标注： 只要可能，直接在折线/条旁边标注数据系列，而不是使用单独图例，以减少视线追踪疲劳。
- 强调： 为“当前”或“目标”数据系列使用高对比色，为历史或基准数据使用柔和的中间色。
- 上下文层次： 轴标题应存在但应次要（更小/更浅）于主要数据和图表标题。
4. 应用无障碍色彩和图案
确保数据对所有人可感知：
- 色盲安全调色板： 使用不同的色相和变化的亮度层次。避免仅使用红色和绿色来表示“坏”与“好”；请使用红/蓝或添加图标/符号。
- 冗余编码： 不仅仅使用颜色。添加虚线、不同的标记形状（圆形、方形、三角形）或独特的图案/纹理来区分系列。
- 对比度： 确保所有文本（标签、轴）与背景的对比度符合WCAG AA标准（4.5:1）。
5. 设计响应式交互
- 渐进式披露： 使用工具提示在悬停/触摸时显示精确值，使图表保持干净且易于扫描。
- 响应式重排：
- 水平到垂直： 桌面端的宽垂直条形图应在移动端切换为水平条形图，以避免水平滚动。
- 数据精简： 在移动端，减少X轴标签的数量（例如，每隔一个月显示）或聚合数据点。
- 宽高比锁定： 确保图表保持可读性；使用CSS中的
aspect-ratio来预留空间并防止布局偏移。
决策规则
- “无饼图”规则： 如果超过5个类别或类别间差异很小，请避免使用饼图/环形图。改为使用水平条形图。
- 标注优先于图例： 如果需要图例，应将其尽可能靠近数据放置（例如，图表上方或右对齐），而不是放在最底部。
- 单色成功： 一个好的图表即使打印成灰度也应该可以理解。如果不能，说明颜色选择或标记过于依赖色相。
- 精度与扫描： 在仪表盘上，为了快速扫描，对数值进行取整（例如，使用120万而不是1,242,301）。在工具提示中保持高精度。
约束
- 无障碍： 图表必须附带数据表格或包含总结关键见解的描述性
aria-label。使用role="graphics-document"或role="img"并结合aria-label。确保所有交互元素（标记）符合24x24像素的最小目标尺寸。 - 响应式： 图表绝不能有固定的像素宽度；它们必须是流体的。对于复杂的SVG图表，使用
viewBox进行缩放。 - 层次： 图表的标题应是最突出的文本，其次是数据本身。
常见失败模式
- 饼图过载： 试图在饼图中显示10个扇区，使得较小的扇区无法区分。
- 截断坐标轴： 从非零值开始条形图，使微小差异看起来很大（欺骗性设计）。
- 仅依赖颜色： 仅使用相似的蓝色阴影在折线图中区分5条折线，使得色盲用户无法访问。
- 图例疲劳： 迫使用户在颜色键和数据之间来回查看10次以理解图表。
- 移动端图表溢出： 未针对移动端调整图表类型或标注，导致文本过小、无法阅读或布局破损。
验证标准
- 图表类型选择与沟通目标匹配（例如，趋势用折线图）。
- 条形图从零基线开始。
- 调色板是色盲安全的，并使用冗余编码（标记/图案）。
- 在空间允许的情况下使用直接标注；图例放置在附近。
- 图表是流体的，并能正确适应移动端（例如，水平重排）。
- 无障碍：
aria-label提供了数据/见解的总结。 - 交互：工具提示在悬停/触摸时提供精确数据。
- 所有文本符合WCAG AA对比度（4.5:1）。