迷你折线矩阵

概述

Sparkline 矩阵把众多迷你折线图排列在网格中，便于快速比较多个实体的趋势。每条 sparkline 极简——无坐标轴、无图例——专注于形状与变化方向。

何时使用

• 对比产品、地区或指标的趋势
• Dashboard 中的 KPI 摘要
• 跟踪包含多只股票的投资组合
• 服务器或传感器状态面板
• 在深挖前先展示整体模式

不适用

• 需要精确数值的场景
• 少于六个实体（常规图更合适）
• 需要查看详细坐标轴的受众

关键变体

• 可选的末值标签
• 按表现着色（绿/红）
• 标记最小/最大值
• 统一 Y 轴 vs 独立 Y 轴
• 点击或悬停时的交互式放大

使用场景

• 资产组合视图（每个资产一条 sparkline）
• 网站分析（按页面的访问量）
• 销售看板（按产品线的收入）
• 服务器监控（每实例 CPU/内存）
• 营销活动（各活动的转化）
• 体育统计（球员表现）

数据 (CSV)

entity,week1,week2,week3,week4,week5,week6
Product A,120,125,130,128,135,140
...
Product F,90,88,92,95,93,98

图表配置 (JSON)

性能提示

• SVG 保持清晰，Canvas 更快；按需选择
• 每条 sparkline 控制在 20–30 个点，保证易读
• 超过 100 个单元格时使用虚拟化
• 当数据变化不大时缓存结果

常见问题

最多能放多少条 sparkline？ 20–50 条效果不错；超过 100 条请提供分页或筛选。

是否统一 Y 轴？ 视需求而定。统一刻度方便比大小，独立刻度突出趋势形状。

可以加交互吗？ 可以：悬停 tooltip、点击展开或跳转详细视图。

需要多简洁？ 按 Tufte 的建议：无坐标轴、无标签，只保留折线。末值或 min/max 仅在必要时添加。

如何处理缺失数据？ 显示空段或断线；不要在未说明的情况下插值。

如何突出异常？ 用颜色、加粗或标记异常点；也可增加一列告警。