当我们在制作仪表盘或其他数据可视化时离不开对图表的选择，不同的数据信息该怎么选择图表可能是不少人会遇到的问题。
核心要点
- 图表选择的本质是把数据映射到图形标记和视觉通道上。
- 标记包括点、线、面等基础图形元素；视觉通道包括位置、形状、长度、面积、颜色等。
- 分类数据适合用位置、形状、颜色色调等通道表达；有序或定量数据适合用位置、长度、面积、颜色亮度或饱和度表达。
- 仪表盘设计时，先判断要表达的是比较、趋势、占比、分布、层级、关系还是地图，再选择图表。
- 一个图表不要同时承载过多视觉通道，否则会降低可读性。
图形语法是什么
要解决这个问题我们首先需要理解数据可视化的生成规律或者说是“语法”，目前主流的数据可视化理论认为，可视化是由基础标记（Mark）沿着某个或是某些视觉通道（Visual channel）进行映射的结果。
- 标记我们也可以理解为图形元素，包括点、线、面等
- 视觉通道通常包括位置、形状、面积、斜度、颜色等
以下面图为例，图1柱状图其表现数据的标记为"线"，柱的纵向长度是视觉通道。图2散点图多了一个横向视觉通道且以“点”为标记。图3多了一个颜色视觉通道。图4多了一个尺寸的视觉通道。
标记与数据关系
- 点：每个点表示一个数据，点可以是各种图形（圆、矩形或是其他自定义图形等）
- 线：通常情况表示一组数据，比如折线图的曲线。也可以表示一个数据，比如柱状图的柱（interval）数据对应就是柱的长度
- 面：2D场景通常是线的延伸跟颜色组合用来突出数据，比如折线图和面积图
视觉通道与数据映射
数据通常为有序和分类两种形式，视觉通道也可以分为两种性质。
- 分类性质：颜色的不同色调通常用于表现分类数据，比如服务状态，绿色代表健康，红色代表异常
- 定量或定序性质：同一个色调的颜色不同亮度或是饱和度时可以用于表现有序的数据，常见的就是热力图比如 Github 的 contributions 图，contributions 数量越大当天的色块颜色就越深
通常情况会把形状、颜色的色调、空间位置认定为分类性质的视觉通道，其他的比如直线长度、区域面积、角度、颜色饱和度亮度等大部分认定为定量性质的视觉通道
以下整理了一些常见视觉通道和数据类型之间的映射关系
| 视觉通道 | 数据类型 |
|---|---|
| 位置 | 分类、有序 |
| 颜色(饱和度) | 分类 |
| 形状 | 分类 |
| 长度 | 有序 |
| 面积、大小 | 有序 |
| 颜色(亮度/饱和度) | 有序 |
按用途选择图表
- 比较类帮忙我们对比两个或两个以上类别的值，常见的图表有：柱状图、热力图、饼图等
- 趋势类展示数据随着时间的变化情况。常见的图表有：折线图、时序轴的柱状图等
- 占比类指的是某一项或某几项数据在总体中的比重。常见的图表有：饼图、环图、仪表盘图、水位图等
- 分布类展示数据分布的图表。常见的图表有：直方图（直方图和柱状图不是一类图表）、密度图等
- 还有一些其他的类型 层级类、关系类、地图类等
| 表达目的 | 适合优先考虑的图表 | 选择理由 |
|---|---|---|
| 比较 | 柱状图、热力图、饼图 | 对比不同类别或多个对象的值 |
| 趋势 | 折线图、时间轴柱状图 | 展示数据随时间变化 |
| 占比 | 饼图、环图、仪表盘图、水位图 | 表达部分与整体的关系 |
| 分布 | 直方图、密度图 | 观察数据集中、离散和区间分布 |
| 层级/关系/地图 | 树图、关系图、地图类图表 | 表达结构、关联或地理位置 |
仪表盘设计中的判断顺序
- 先确认数据类型：分类、有序、时间序列、空间位置，还是多个类型的组合。
- 再确认读者要回答的问题：比较大小、观察趋势、查看占比、理解分布，还是定位异常。
- 然后选择视觉通道：优先使用位置和长度表达定量差异，使用颜色色调区分类别。
- 最后控制复杂度：同一张图中不要堆叠太多颜色、形状、大小和标签。
FAQ
为什么不能只凭好看选择图表？
因为图表的核心任务是降低理解成本。视觉效果如果和数据类型不匹配，会让读者误读数据。
颜色适合表达什么数据？
不同色调更适合表达分类；同一色调的亮度或饱和度变化，更适合表达有序或定量数据。
直方图和柱状图是一类图表吗？
不是。本文中也特别提醒：直方图用于展示分布，柱状图常用于类别比较。
