编辑导语：图表是数据展示的常见方法，合理的图表设计可以让用户更加清晰地获取信息，也可以让业务更加顺利地推进。而不同的业务场景下，图表的具体应用也有所差别。本篇文章里，作者总结了图表在具体场景下的使用与建议，一起来看一下。
一、第一部分：设计思路
设计思路主要是看你要展示突出数据哪个方面，是比较结果、数据分布情况、多元素间的联系、流程转变变化、展示不同地理位置分布情况还是多元素组成构成方面。
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）堆叠面积图
① 用法
- 用来比较在一个区间内的多个变量；
- 有多个数据系列，并想分析每个类别的部分到整体的关系，并展现部分量对于总量的贡献时，使用堆积面积图是非常合适的选择。
② 建议
- 类别数量越多，重叠越多，可以用堆叠面积图；
- 不能用于包含负值的数据的展示；
- 把变化量较大的数据放在上方，变化量较小的数据放在下方会获得更加的展示效果。
1）基础柱状图
① 用法
- 过使用水平或垂直方向柱子的高度来显示不同类别的数值；
- 类型：横向、纵向（当图表的数据标签很长或者有超过10个项目进行比较时，适用纵向）。
② 建议
- 避免使用太多颜色；
- 柱状图柱子间的宽度和间隙要适当；
- 不建议使用三维柱状图，数值会不太精确。
2）双向柱状图
① 用法
用法用于展示包含相反含义的数据的对比（例:：一周内个人收入和支出的统计）。
② 建议
- 使用差值较大的颜色，突出对比；
- 不要在0基线的右边画负值的水平条行图或在0基线的上边画负值的柱子，以免和常识违背造成误解；
- 不建议使用三维柱状图，数值会不太精确。
3）堆叠柱状图
用法
堆叠柱图则是一个个叠加起来的。它可以展示每一个分类的总量，以及该分类包含的每个小分类的大小及占比。
4）分组柱状图
用法
当两个或多个数据序列并排显示并在同一轴上的类别下分组时，将使用分组柱状图。
3. 饼图
① 用法
- 饼图主要用于展现不同类别数值相对于总数的占比情况。
- 用法(图中每个分块(扇区）的弧长表示该类别的占比大小，所有分块数据总和为100%。
- 呈现的不是具体的数据，而是该数据相对于总数的占比
② 建议
- 呈现的不是具体的数据，而是该数据相对于总数的占比；
- 我们很难比较一个分块过多的饼图的数据，建议尽量将饼图分块数量控制在五个以内（建议较小部分合并为“其他”）；
- 当各类别数据占比较接近时，我们很难对比出每个类别占比的大小。建议选用柱状图或南丁格尔玫瑰图；
- 大多数人视觉习惯是按照顺时针和自上而下的顺序去观察，因此在绘制饼图时，建议从12点钟开始沿顺时针右边第一个分块绘制饼图最大的数据分块；
- 三维的饼图歪曲了各分块相对于整体的比例关系，会造成错误及理解上的困扰。
① 用法
- 显示数据的两个变量（X和Y轴）之间的关系，数据显示为点的集合，适合用于在不考虑时间的情况下比较大量的数据点；
- 散点图通常用来识别两个变量之间的相关性或用来观察他们的关系，从而发现某种趋势，有效的说明两个变量之间的相关性，但是并不能有力地证明其中存在因果关系（正相关、负相关和不相关）；
- 查找异常值或理解数据分布也很有效。
② 建议
- 足够多的数据；
- 数据含不同系列，颜色区分。
① 用法
- 与散点图相同类型；
- 散点图不同的是，气泡图是一个多变量图，它增加了第三个数值即气泡大小的变量，在气泡图中，较大的气泡表示较大的值。
② 建议
- 当数据具有3个序列、特征及相关值（例：代码提交的日期、具体的时间点的气泡图，气泡的大小说明了提交的代码量、Punch Card of github）；
- 气泡图还经常用于和地图结合，其中，x轴和y轴是经度和纬度的数据定位，气泡的大小可以表明该位置数量的多少。
用法
适用于显示三个或更多的维度的变量。
7. 漏斗图
① 用法
- 漏斗图将数据呈现为几个阶段，每个阶段的数据都是整体的一部分，从一个阶段到另一个阶段数据自上而下逐渐下降，所有阶段的占比总计100%。
- 漏斗图呈现的也不是具体的数据，而是该数据相对于总数的占比、漏斗图不需要使用任何数据轴。
② 建议
- 对两个基于统一事情前后的两份数据，使用叠加两个漏斗图进行对比 如：预期与实现值；
- 左右对比的漏斗图，同时分析两个项目的转化情况；
- 漏斗图不是表示各个分类的占比情况，而是展示数据变化的一个逻辑流程。
① 用法
以直观的表现出某个指标的进度或实际情况。示：类似于拨号/速度计上的读数的数据，是一种拟物化的展示形式。
② 建议
适合在量化的情况下显示单一的价值和衡量标准，不适合用于比较不同变量或者趋势的。
9. 词云
① 用法
- 快速感知最突出的文字；
- 快速定位按字母顺序排列的文字中相对突出的部分。
② 建议
- 超过 30 条数据（若当数据的区分度不大时使用词云起不到突出的效果，若数据太少时很难布局出好看的词云）。
用法
- 适用于多个百分比数据的呈现；
- 以直观的表现出某个指标的进度或实际情况
- 不局限于圆形，可以自定义图标，让可视化更加有趣。
本文由 @黄泡泡 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议返回搜狐，查看更多
责任编辑：