编辑导语：图表是数据展示的常见方法，合理的图表设计可以让用户更加清晰地获取信息，也可以让业务更加顺利地推进。而不同的业务场景下，图表的具体应用也有所差别。本篇文章里，作者总结了图表在具体场景下的使用与建议，一起来看一下。

一、第一部分：设计思路

设计思路主要是看你要展示突出数据哪个方面，是比较结果、数据分布情况、多元素间的联系、流程转变变化、展示不同地理位置分布情况还是多元素组成构成方面。

1. 比较

突显值与值之间的不同和相似之处。使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小，通常用于展示不同分类间的数值对比，不同时间点的数据对比。

常见图表：柱状图、双向柱状图、气泡图、子弹图、色块图、漏斗图、直方图、堆叠柱状图和词云等。

1）基于时间

若是少周期的数据建议采用柱状图（单个或少数分类）或曲线图（多者分类），若是多周期的数据比较建议采用雷达图（循环数据）或曲线图（循环数据）。

柱状图

曲线图

雷达图

曲线图

2）基于分类

若是每个项目1个变量则采用条形图（多项目）或柱状图（少数）或表格或内嵌表格的表格，若是每个项目2个变量采用不等宽柱状图。

条形图

柱状图

内嵌表格的表格

不等宽柱状图

3）基于数据量

若是大量数据建议采用词云。若是少量数据采用条形图。

词云

条形图

2. 分布

突出显示的频率，数据分散在一个区间或分组。使用图形的位置、大小、颜色的渐变程度来表现数据的分布，通常用于展示连续数据上数值的分布情况。

常见图表：直方图、热力图、散点图、分布曲线图、气泡图、箱型图或点描法地图。

1）单变量

采用直方图（少数据点）、正态分布图、热力图或点描法地图（多数据点）。

直方图

热力图

点描法地图

2）2个变量

采用散点图或色块图或者箱型图。

散点图

色块图

箱型图

3）3个变量

采用多变量采用曲面图。

曲面图

3. 联系

显示多元素数据之间相互关系，通常用于表示数据之间的相关性。

常见图表：散点图、气泡图或桑基图等。

1）2个变量

采用散点图。

散点图

2）3个变量

采用气泡图。

气泡图

4. 流程

显示数据流转情况，一般流程都会呈现出多个环节，每个环节之间会有相应的流量关系，这类图形可以很好地表示这些关系，采用漏斗图和桑基图。

常见图表：漏斗图和桑基图等。

流程流转

5. 地图

通过图形的位置来表现数据的地理位置，通常来展示数据在不同地理区域上的分布情况，一般采用带气泡的地图、分级统计地图或点描述地图。

常见图表：带气泡的地图、分级统计地图或点描述地图。

突显地理位置分布

带气泡的地图

分级统计地图

点描述地图

6. 构成

同一维度多元素数据组成构成分布。

常见图表：饼状图、瀑布图、环图、堆叠面积图或堆叠柱状图等。

1）静态

若是占总体比例采用饼状图（数据相差比较大）、环图（数据相差比较大）或玫瑰图（数据相差不大），若是累计或者扣减到总计采用瀑布图。

饼图

环图

玫瑰环图

瀑布图

2）随时间变化

若是少数周期采用堆积百分比柱状图（仅相对差异）或堆积柱状图（相对或绝对差异），若是多周期采用堆积百分比面积图（仅相对差异）或堆积面积图（相对或绝对差异）。

百分比柱状图

堆叠柱状图

百分比堆叠面积图

堆叠面积图

二、第二部分：图表使用说明

1. 折线图

1）基础折线图

① 用法

• 折线图主要用来展示数据随着时间推移的趋势或变化；
• 折线图非常适合用于展示一个连续的二维数据例：如某网站访问人数或商品销量价格的波动；
• 折线图除了展示某个事情发展的趋势，还可以用来比较多个不同的数据序列。例：如某网站访问人数或商品销量价格的波动。

② 建议

• 使用实线绘制数据线；
• 建议不要绘制4条以上的折线（线都折叠在一起并且又没有明显的对比，整张图表就会混乱并难以阅读）；
• 不建议使用过多的装饰来区分图表；
• 展示折线图的数据时，要避免刻意的歪曲趋势。

2）面积图

① 用法

用法用来展示随着连续时间的推移数据的变化趋势。

② 建议

• 避免重叠，若重叠少或中等，以通过将颜色和透明度设置为适当的值，若重叠多，改用堆叠面积图；
• 适合用来展示二到三组数据，不超过4组；
• 当数字偏差较小时，区域是模糊不清的，此时不太适合使用面积图展示用来比较在一个区间内的多个变量。

3）堆叠面积图

① 用法

• 用来比较在一个区间内的多个变量；
• 有多个数据系列，并想分析每个类别的部分到整体的关系，并展现部分量对于总量的贡献时，使用堆积面积图是非常合适的选择。

② 建议

• 类别数量越多，重叠越多，可以用堆叠面积图；
• 不能用于包含负值的数据的展示；
• 把变化量较大的数据放在上方，变化量较小的数据放在下方会获得更加的展示效果。

2. 柱状图

1）基础柱状图

① 用法

• 过使用水平或垂直方向柱子的高度来显示不同类别的数值；
• 类型：横向、纵向（当图表的数据标签很长或者有超过10个项目进行比较时，适用纵向）。

② 建议

• 避免使用太多颜色；
• 柱状图柱子间的宽度和间隙要适当；
• 不建议使用三维柱状图，数值会不太精确。

2）双向柱状图

① 用法

用法用于展示包含相反含义的数据的对比（例:：一周内个人收入和支出的统计）。

② 建议

• 使用差值较大的颜色，突出对比；
• 不要在0基线的右边画负值的水平条行图或在0基线的上边画负值的柱子，以免和常识违背造成误解；
• 不建议使用三维柱状图，数值会不太精确。

3）堆叠柱状图

用法

堆叠柱图则是一个个叠加起来的。它可以展示每一个分类的总量，以及该分类包含的每个小分类的大小及占比。

4）分组柱状图

用法

当两个或多个数据序列并排显示并在同一轴上的类别下分组时，将使用分组柱状图。

3. 饼图

① 用法

• 饼图主要用于展现不同类别数值相对于总数的占比情况。
• 用法(图中每个分块(扇区）的弧长表示该类别的占比大小，所有分块数据总和为100%。
• 呈现的不是具体的数据，而是该数据相对于总数的占比

② 建议

• 呈现的不是具体的数据，而是该数据相对于总数的占比；
• 我们很难比较一个分块过多的饼图的数据，建议尽量将饼图分块数量控制在五个以内（建议较小部分合并为“其他”）；
• 当各类别数据占比较接近时，我们很难对比出每个类别占比的大小。建议选用柱状图或南丁格尔玫瑰图；
• 大多数人视觉习惯是按照顺时针和自上而下的顺序去观察，因此在绘制饼图时，建议从12点钟开始沿顺时针右边第一个分块绘制饼图最大的数据分块；
• 三维的饼图歪曲了各分块相对于整体的比例关系，会造成错误及理解上的困扰。

4. 散点图

① 用法

• 显示数据的两个变量（X和Y轴）之间的关系，数据显示为点的集合，适合用于在不考虑时间的情况下比较大量的数据点；
• 散点图通常用来识别两个变量之间的相关性或用来观察他们的关系，从而发现某种趋势，有效的说明两个变量之间的相关性，但是并不能有力地证明其中存在因果关系（正相关、负相关和不相关）；
• 查找异常值或理解数据分布也很有效。

② 建议

• 足够多的数据；
• 数据含不同系列，颜色区分。

5. 气泡图

① 用法

• 与散点图相同类型；
• 散点图不同的是，气泡图是一个多变量图，它增加了第三个数值即气泡大小的变量，在气泡图中，较大的气泡表示较大的值。

② 建议

• 当数据具有3个序列、特征及相关值（例：代码提交的日期、具体的时间点的气泡图，气泡的大小说明了提交的代码量、Punch Card of github）；
• 气泡图还经常用于和地图结合，其中，x轴和y轴是经度和纬度的数据定位，气泡的大小可以表明该位置数量的多少。

6. 雷达图

用法

适用于显示三个或更多的维度的变量。

7. 漏斗图

① 用法

• 漏斗图将数据呈现为几个阶段，每个阶段的数据都是整体的一部分，从一个阶段到另一个阶段数据自上而下逐渐下降，所有阶段的占比总计100%。
• 漏斗图呈现的也不是具体的数据，而是该数据相对于总数的占比、漏斗图不需要使用任何数据轴。

② 建议

• 对两个基于统一事情前后的两份数据，使用叠加两个漏斗图进行对比 如：预期与实现值；
• 左右对比的漏斗图，同时分析两个项目的转化情况；
• 漏斗图不是表示各个分类的占比情况，而是展示数据变化的一个逻辑流程。

8. 仪表盘

① 用法

以直观的表现出某个指标的进度或实际情况。示：类似于拨号/速度计上的读数的数据，是一种拟物化的展示形式。

② 建议

适合在量化的情况下显示单一的价值和衡量标准，不适合用于比较不同变量或者趋势的。

9. 词云

① 用法

• 快速感知最突出的文字；
• 快速定位按字母顺序排列的文字中相对突出的部分。

② 建议

• 超过 30 条数据（若当数据的区分度不大时使用词云起不到突出的效果，若数据太少时很难布局出好看的词云）。

10. 水波图

用法

• 适用于多个百分比数据的呈现；
• 以直观的表现出某个指标的进度或实际情况
• 不局限于圆形，可以自定义图标，让可视化更加有趣。

本文由 @黄泡泡 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议