U2.16.4Sparklines in tables设计

表格中嵌入迷你图可同时满足读数与看趋势

别名: 迷你图 · sparkline

概念解释

表与图的对立在迷你图处握手:在表格里加一列词大小的图(sparkline),数值列继续负责精确取值,迷你图列负责形状与趋势——"读数"与"看形"两种任务在同一行内各取所需。一行一句读:名称、当期值、环比、再一眼小图确认走势,既有表格的密度与可引用性,又有图形的趋势判读力。它是混合任务的两全方案,也是宽表对抗"列多读不动"的常用手段。

机制

迷你图把两种编码按任务分列而非按媒介二选一:符号列(数字)服务取值,图形列(无轴折线)服务形状判读,行结构让两者共享同一实体上下文,免去图例与来回对照。代价是图形被剥夺了刻度:迷你图只剩相对形状(升、降、震荡、断崖),没有量值参照,因此同列迷你图必须共享取值范围才能行间比较——这是分面共享标度约束在表格里的重现。词大小的尺寸还决定了它只容得下一个序列的轮廓,放不下多条线。

边界

迷你图只承诺相对形状,任何需要量值的判断(差多少、峰值是多少)回到数字列或下钻视图。列的语义要单一:一列一种图形(一列趋势、一列分布微图),混用会破坏"列即编码"的稳定性。密集行(数百行)里迷你图仍可工作——它本来就该缩到词大小;但若读者主要任务是发现异常而非逐行核查,整页转成图形(热力图/折线阵列)更高效。

怎么落地

  • 趋势列统一参数:同列同范围(含零点策略一致)、同时间窗、同色;范围按全表数据算,不按行算。
  • 数值列与迷你图列紧邻排布(当期值紧挨趋势图),首末与峰谷可选加端点标记。
  • 验证:抽查两行迷你图的视觉斜率与真实斜率方向是否一致;同一形状在不同行应可比,出现"同数不同形"即范围未统一。

延伸

  • 同组U2.16.1 需要精确取值时表格优于图表 · U2.16.2 需要发现模式与比较趋势时图表优于表格 · U2.16.3 数据量小且维度少时表格的信息密度更高 · U2.16.5 表格的行排序承担与图表类别排序相同的作用
  • 相邻U2.15.2 所有分面必须共享同一标度才可相互比较 · U2.03.1 折线图适合有序变量上的趋势
  • 站内检索sparkline · word-sized graphic · inline chart · tabular visualization

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/U2.16.4