作者 | Destiny

来源 | 木东居士

0x00 前言

第1篇文章《数据可视化过程》发出后，通过居士收到一些读者的反馈，大家的共同心声是，希望在后续的文章中，结合具体的业务场景，多分享一些实例及其优缺点。多谢大家的意见，也感谢大家的支持，后续会不断改进，输出更多干货。

在数据可视化的过程当中，根据数据间的关系选择合适的图表，是保证数据可视化效果的关键。今天这篇文章，主要分享以下两类数据关系的可视化：

• 时序数据可视化；
• 比例型数据可视化；

0x01 时序数据可视化

时序数据，是指任何随着时间而变化的数据，如一天中气温随时间的变化。

要进行时序数据的可视化，我们首先需要了解「时间」所具有的特征：

• 有序性：时间都是有序的，事件之间有先后顺序。
• 周期性：许多自然或商业现象都具有循环规律，如季节等周期性的循环。
• 结构性：时间的尺度可以按照年、季度、月、日、小时、分钟、秒等去切割。

「时间数据」按是否连续可分为：离散型时间和连续型时间两类，时间类型的差异决定了图表的表现形式也不同。

1. 离散时间的可视化

离散时间：数据来源于具体的时间点或者时间段，且时间数据的可能取值是有限的。

对于分布在离散时间的数据的可视化，可以采用柱状图、堆叠柱状图、散点图来表示，下面分别来看下三种图形来进行离散时间可视化的适用场景和不适用场景。

（1）单一柱状图

1）适用场景

• 适合表示离散时间数据的趋势，且数据条个数一般不超过12条。
• 适用于单类别数据的时间趋势表示，即系列值单一的数据。

2）不适用场景

• 不适合展示连续时间的变化趋势。
• 不适合数据条过多的离散时间的趋势展示。

（2）并列柱状图

单一柱状图，是表示某一系列数值在离散时间上的可视化方式。当需要对比某一离散时间上的多个系列，以及展示随时间的变化趋势时，并列柱状图是一种选择。

但是要注意一点，并列柱状图的属性系列，通常不能超过3条，否则图表横向空间会比较拥挤，展示的效果也不好。

（3）堆叠柱状图

单一柱状图，是表示各个离散时间点总体数值的一个方式。但是，当我们想知道各个离散时间点总体的构成部分，是如何随着时间而变化的，这个时候，就需要引入堆叠柱状图。

堆叠柱状图，按照堆叠的部分，展示的是实际体量还是相对体量，可以分为两类：

• 普通堆叠柱状图：展示实际体量。
• 百分比堆叠柱状图：展示相对体量。

1）普通堆叠柱状图

假设某电影院想分析，2019年上半年个月的票房情况，同时也想知道各个月的国产片和外国片共贡献的票房分别为多少，这种情况下，我们可以用普通的堆叠柱状图来表示，具体如下：

普通堆叠柱状图，整体的构成部分，最好不要超过5项。若实际构成项大于5个时，需要做适当的归类，以保证图表重点突出。

2）百分比堆叠柱状图

若影院想知道上半年各月，国产片和外国片的贡献占比随时间的变化情况，这个时候就可以使用百分比堆叠柱状图。

（3）散点图

散点图，通常用来表示两个变量间的相关关系。在表示离散时间数据时，其表达的是某一变量随时间的变化关系。

柱状图是用高度作为数值的映射，而散点图则是用位置来作为数值的视觉通道。

注意：当有多个系列列时，不不适合⽤用散点图来表示时间趋势，因为多个系列列的圆点同时出现时，很难将其中某个系列列视为⼀一个整体，⽐比较起来很吃⼒力力。此时除了了把颜⾊色作为映射的视觉通道之外，也可以给各个系列列选择不不同的数据标记，如正⽅方形、圆、三⻆角形、菱形等。

2. 连续时间

连续时间：连续时间数据的可视化和离散时间数据的可视化相似。因为就算数据是连续的，我们采集的数据大部分还是离散且有限的。

连续型数据和离散型数据，在数据结构上并没有差别，区别在于它们所反映的真实世界的数据是否是不断变化的。如一天当中的气温变化，就是连续型数据，因为你在一天中的任何时候都可以进行测量，且气温在不同时刻是变化的。

（1）折线图

折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化。在折线图中，一般水平轴（X轴）用来表示时间的推移，并且间隔相同；而垂直轴（Y轴）代表不同时刻的数据的大小。

折线图主要包括三类：点线图、折线图、曲线图。

• 点线图：当数据集中的数据项有限，不超过12个时，采用此种点线图比较合适。有时候，对应日期的数据点上方，会直接显示数值。
• 折线图：当数据集中的数据项比较多，大于12条时，采用点线图，会让整条线上的点很密集，影响看数据的趋势，此时采用折线图是不错的选择。
• 曲线图：相比于折线图，曲线图相邻节点的连线更加平滑，可视化效果也更加美观。

从点线图中，可以观察出4种趋势：长期性趋势、季节性趋势、周期性趋势、不规则波动。

（2）阶梯图

阶梯图常用来表示，某两个相邻的时间节点，后一个节点的数据相对于前一个节点数据的升降变化，常用于商品价格变动、股票价格波动、税率变化等场景中。

在阶梯图中，有三个关键的值：

a.前一时间节点数值；

b.当前时间节点数值；

c.当前节点较前一节点的差值；

（3）拟合曲线图

若我们想要研究数据随时间的变化所表现出来的整体趋势时，可以根据多个离散点（T1,D1）、（T2,D2）….、（Tn,Dn），拟合一个最接近的一个连续函数关系。

拟合曲线图，在数据预测中应用较多。比如，某一电商网站要预测今年双十一的GMV，那么它可以根据往年每月的交易额趋势，今年每月与去年同期的数据等多个变量，去拟合出交易额与时间等其他因素所满足的关系。具体要考虑哪些因素，这个和数据模型的搭建息息相关，此处不做延伸。

0x02 比例型数据可视化

比例数据，通常是按照类别、子类别、群体进行的划分。对于比例型数据，我们进行可视化的目的，是为了寻找整体中的最大值、最小值、整体的构成分布、以及各部分之间的相对关系。

1.饼图

当构成整体的数据项较少时，采用饼图是一种不错的选择，饼图是通过角度来映射各类别对应的数值。

但是，现实的数据情况是，一个维度下的属性值数量，通常会比较多，如果在饼图中全部展示出来，一方面会使整个饼图显得杂乱，没有重点，另一方面也失去了可视化的美感。

因此，对于饼图来说，建议扇区个数最大值在5～7个之间。当数据项超过一定数量时，可以按照占比，把排名最末的几项归位「其他」。我通常的做法是：

• 当数据项n<=6时，直接显示各扇区原始类别的名称。
• 当数据项n>6时，直接显示占比排名TOP5扇区的原始类别名称，剩余的数据项则归为「其他」。

当然，饼图中最大可展示的分类项个数可以根据实际情况确定，但是对于一个数据产品内部，建议标准统一，这样前后端同学会在进行数据、前端开发工作时，可以进行标准化，提高复用性和开发效率。

2.环形图

饼图通过各扇区角度去映射各分类项对应的数值，「环形图」则通过各弧形的长度来衡量数值。

环形图中心部位是空的，可以放置标签、整体数值、平均数值或其他内容。环形图中，数据项的分类和饼图类似，就不在赘述。

3.百分比堆叠柱状图

当比例数据中存在多个父系列，每个父系列又由多个子类构成，且各个系列的子类相同时，此时展示比例数据，可以采用百分比堆叠柱状图。

• 各个系列对应的柱形条的高度是相同的，顶部刻度都为100%。
• 每根柱形条内部，各子项柱形条的高度，代表在该系列中的占比。
• 当各系列的子类数目较少时，可以直接在矩形内部展示占比；当数目较多时，建议隐藏。
• 当各系列的子类目较多时，为了保证重点突出和视觉效果，需要对子类目进行归类，归类方法参照饼图。

4.百分比堆叠面积图

当比例数据中存在多个父系列，且父系列的数据类型为时间，要分析父系列的各构成部分占比随时间的变化趋势，此时可以采用堆叠面积图来表示比例关系的变化。

如果从某一点上对堆叠面积图进行垂直切片，那么就可以得到该时间段上的比例分布情况。

5.矩形树图

矩形树图，是一种基于面积的可视化方法。外部矩形代表父级类别，内部矩形代表子类别。相比于其他表示比例型的数据，矩形树图更适合展示具有树状结构的数据。

树状结构，简单理解，就是首先按一级分类来观测各构成部分的比例，然后再看某个一级分类下，是由哪些二级分类构成的，依次类推，逐步细化，可以直到叶子结点。

若用矩形树图来表示具有多个层级结构的比例数据，通常需要使用一些交互方式来辅助数据的展示。比如，单击对应区块进行下钻，悬停展示具体数值和比例，使用面包屑进行层级的跳转等。

0xFF 总结

在可视化图表选择之初，我们首先要明确的是，我们希望从图表中获取什么信息。然后，根据数据的特征、数据之间的关系，选择合适的可视化图表。

如上所述：

• 时序数据，主要目的是研究数据随时间的变化，这种变化包括总量的变化、构成部分的变化、以及变化的趋势和规律。
• 比例数据，区别于其他数据类型的一个关键，在于它是为了寻求整体中的各个构成部分，及其相互关系。