在《用数据讲故事》这本书中，作者在第二章就阐述了图表的选择倾向，其实经常使用且表达效率较高的图表仅12种，在书中有明确的标识，如下图：
image.png
image.png
紧接着，作者阐述了他最常用的几个图表以及原因。
我们以三个指标来衡量图表是否应该在项目中使用。
when？什么情况下使用
why？优势在哪
how？怎么使用用
1. 简单文字
when：当只有一两项数据需要分享或者展示的时候使用。
why：尽可能的突出数据，并消除干扰。
how：在表格或者图形中只放关键数据，也可以用较小的辅助性文字进行解释说明，辅助受众理解图表。
image.png
image.png
2. 表格
when：比图形更简单，在和多个受众沟通时可以使用
why：可以使用不同的计量单位，显示的时候比图形更加简单(web中如果数据庞大时，表格处理速度更快，用户体验更好)
how：在现场演示的时候尽量不要使用表格，可以把表格放在附录中，使用一个链接满足受众的需求。让设计融入背景，让数据占核心地位，不要让厚重的边框和阴影争夺受众的注意力，可以使用窄边框或者空白来区分表格的元素。
image.png
3. 热力图
when：当我们想把表格中的细节和视觉暗示结合起来时，使用热力图。
why：相较于表格，热力图更能重点突出某些数据，提升了表格的易读性，更容易吸引受众的兴趣点。
how：给表格填充不同的颜色，重要的数据背景颜色更明显，给受众提供视觉上的暗示。
image.png
上图中的最大值58%和最小值11%可以快速的被受众发现。
4. 散点图
when：在展示两件事的关系时很有用。
why：因为散点图可以同时将数据对应到X轴和Y轴上，受众很容易观察到是否存在某种关系。
how：对关注的数据填充颜色，和其余数据产生鲜明对比。
image.png
如果要关注每英里成本高于平均值的数据时，可以在平均值上设置水平线，并把关注的数据标注其他显眼的颜色。
image.png
5. 折线图
when：绘制连续的数据或者有过渡关系的数据。
why：可以清晰的观察数据的变化趋势。
how：在多条折线时，颜色对比度高一些，尽量避免视觉上的混淆。当x轴为时间轴时，数据必须有相同的时间间隔（避免产生误导）。
image.png
6. 斜率图
when：适用于两个时间段或者两笔数据对比
why：可以清晰的看出两组数组的相对趋势(相对提升，相对降低)
image.png
不论是折线图还是斜率图，重点都在于数据的变化，如果数据相差不大的时候，图像会过于平缓。
7. 条形图
when：想展示最大值，最小值，占比时使用。
why：常见，受众的学习成本低，可以更加专注于数据。易于阅读，并能很快得出结论。
how：图形一定要有原点，尽量以0为原点，否则会造成错误的视觉比较。
image.png
是否应该保留坐标轴？
如果受众关注整体趋势，可以考虑保留坐标，但是把颜色设为灰色来降低重要性。
条形图的宽度应该大于条形图之间空白的宽度
image.png
image.png
8. 堆叠竖直条形图
when：堆叠竖直条形图的用例有些受限。它旨在比较各类别之间总体区别的同时还能看出每个类别中子成分的占比情况。
why：在比较整体数量的同时还能看子成分的占比
how：大多数作图框架(echarts为例)的默认颜色都会比较鲜艳，很快会产生视觉上的压力，而且在没有基线的情况下，很难比较不同类别间的子类别大小。
image.png
只有比较紧贴X轴的子类别时很容易，比较其他子类别很困难。(X轴相当于一根基线)
9. 瀑布图
when：瀑布图可用于抽离出堆叠条形图中的一部分进行重点关注，或者展示起点和结果以及其中的上升下降等变化。
why：分离子类别的数据，可以清晰看到总数的变化原因。
how：重点突出变化的数据。如果图表中没有瀑布图，可以使用堆叠条形图，并隐藏靠近X轴的部分(需要对数据分组并进行计算)。
image.png
10. 水平条形图
when：对分组数据进行整理时使用。
why：首先水平条形图易于阅读，在类别名称过长时更加有效，因为文字从左往右开始书写，符合大多数受众的阅读习惯。当受众看到数字时就看到了结果，一目了然。
how：同组数据中的不同类别需要在颜色上加以区分。并对展示的数据的显示顺序进行分析，如果类别有默认的顺序，不妨尝试使用默认顺序。如果要暗示受众某种特性的信息，可以自定义排序。
image.png
一般受众的阅读习惯是“之”字型阅读(逐行阅读)，请把最重要的类别放到最前面，并将数值以降序进行排列。
11. 堆叠水平条形图
原理类似堆叠竖直条形图。
image.png
12. 面积图
只有在可视化相差极大的数值时使用。
image.png
总结：图表是数据的载体，也是让数据变得直观的方式，所以在选择图表的类型时，首要条件就是能清晰的将信息传递给受众。为什么准确无误的给受众提供数据，在每次选择图表时都要问两个问题，受众是谁？你希望他们了解什么或者做什么？回答了这些问题后才能做出优秀的可视化方案。用作者的话说，“无论是信息图还是其他——不仅仅是指定主题的事实堆积，而是要讲述一个故事。”
需要避开的陷阱
书中作者提到几中平时应该避免的图形，饼图，甜甜圈图(环形图)，3D图形，双y轴等。其中饼图作为开发中最常用的一种图形，在数值相差不大的情况下很容易误导受众，比如书中提到了一个关于市场份额的例子。
“图中展示的饼图（基于实际案例）展示的是 A、B、C 和 D 四个供应商的市场份额。如果我要求你简单观察一下——在这张图中哪家供应商的份额最大——你会得出什么结论？”
image.png
在没有标注数值的情况下，视觉就是我们最直观的衡量方式，明显感觉供应商B的份额最大。接下来，看一下标注数据的图表。
image.png
发现其实占有率最高的是供应商A，那么问题出在哪里呢？
倾斜使得饼图上方的部分显得距离更远，因而看起来比实际要小，下方的部分距离较近，所以看起来相对更大一些。
作者反复强调，不要使用3D图形进行可视化，因为它会扭曲数据的视觉效果。
不使用饼图还有一个原因，人眼不善于在二维空间进行定量的度量，当饼图的各部分数值很相近时，我们无法判断那一块更大。
更好的解决方案就是使用水平直方图来代替饼图，数值从大到小依次排列，这样受众就能清晰的看到哪个供应商的市场份额更大。
image.png
那么不使用甜甜圈图(环形图)，也是类似的道理，饼图是让受众比较角度和面积，而甜甜圈图则是让受众比较弧度，这同样难以完成。
“数据可视化的黄金定律之一是：永远别用 3D 图形。跟着我重复一遍：永远别用 3D 图形。唯一的例外是当你的确在绘制三维空间时（即便如此，事情会很快变得棘手，所以千万谨慎）——在绘制一维空间时，永远别用 3D 图形。正如在之前饼图的示例中所见，3D 使数据发生倾斜，从而更难甚至无法解读和比较。”
摘录来自: [美] Cole N. Knaflic. “用数据讲故事”。 iBooks.
网友评论