关于图表设计的一些思考

在日常的工作中，接到一些产品数据可视化的需求，发现了一些问题，比如：

（备注：以下部分内容摘于Antv和Echarts）

发现问题

1. 图表类型使用混乱，该用柱状图的地方用折线图，该用条形图的用饼图展现；

2. 轴名称或时间日期因为字段太长或者需要一次性展示很多项导致堆积叠字；

3. 饼图或者环图的扇形分布了十几个，这样各扇形区域面积相似，起不到饼图占比区分的作用；

4. 在移动端中（画布有限），图例过多或者图例文本太长，显示拥挤或者缺失；

5. 图表颜色使用混乱，没有一个统一的循环色板，且色板循环和占比排列顺序不一致；

了解图表：

图表类别很多，这里我们就只说说我们常见的三类图表说起，毕竟平时工作常用的就是它们了。

1. 比较类（柱状图 / 条形图）

基础柱状图，使用垂直或水平的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。

适合场景：

分类数据对比

不适合场景：

a. 分类太多（超过12条分类）不适合纵向柱状图，x轴分类数据需要旋转，不利于阅读，相比于纵向柱状图，横向柱状图更适用于此类分类较多的场景；

使用横向柱状图，文本可以横向排布，便于用户的阅读，效果如下：

b. 不适合表示趋势,柱状图使用矩形的长度（宽度）来对比分类数据的大小，非常方便临近的数据进行大小的对比，不适合展示连续数据的趋势,折线图更具有优势；

2. 占比类（饼图 / 环图）

饼图/环图广泛得应用在各个领域，用于表示不同分类的占比情况，通过面积或弧度大小来对比各种分类，环图相对于饼图空间的利用率更高，比如我们可以使用它的空心区域显示文本信息，比如标题等。

饼图可以很好地帮助用户快速了解数据的占比分配。它的主要缺点是：

a. 饼图不适用于多分类的数据，原则上一张饼图不可多于 8 个分类，因为随着分类的增多，每个切片就会变小，最后导致大小区分不明显，每个切片看上去都差不多大小，这样对于数据的对比是没有什么意义的。所以饼图不适合用于数据量大且分类很多的场景。

b. 相比于具备同样功能的其他图表（比如百分比柱状图、环图），饼图需要占据更大的画布空间。

c. 很难进行多个饼图之间的数值比较。

尽管如此，在一张饼图上比较一个数据系列上各个分类的大小占比还是很方便高效的。

适合场景：

多个但不超过 8 个分类的占比情况；

不适合场景：

a. 分类过多的场景，推荐使用横向条形图;

b. 分类占比差别不明显的场景

3. 趋势图（折线图 / 面积图）

折线图/面积图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。

适合场景：

有序的因变量，比如：时间；

不适合场景：

a. 水平轴的数据类型为无序的分类时，不适合使用折线图，我们更应该使用柱状图;

b. 折线的条数过多时不建议将多条线绘制在一张图上(折线数量不多于5条);

本期知识点总结：

1. 柱状图主要用于多个分类间的数据（大小、数值）的对比，多于12条建议条形图；

2. 折线图主要用于展示连续数值（例如时间）或者有序分类的变化趋势；

3. 饼图主要是展示分类之间的占比情况，分类种类不多于8个；

4. 折线图和面积图都可以表示一段时间（或者有序分类）的趋势，相比之下面积图的表现力更强一些；

5. 面积图和折线图都是展示时间或连续数据上的趋势，折线图相互之间不进行遮盖，可以用于显示更多的记录；

我们在日常设计过程中，肯定会遇到以上类型的图表设计，看似简单的图表，其中蕴涵了很多小细节和小惊喜，在研究的过程中也是很兴奋的，以上分享整理，希望对大家有帮助，谢谢。

*************************************************

下期预告：《图表组件设计规范和移动端图表设计》