图表使用技巧解析

0 评论 3030 浏览 9 收藏 20 分钟

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

一、第一部分:设计思路

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

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 协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!