数据可视化图表设计小结

在后台管理系统中，往往会有一个叫做数据统计分析的模块。众所周知，相比较批量展示的文本和数字，图表可以说是最合适辅助进行数据分析的一种设计形式，提高数据可读性和转化力，更帮助数据被人们理解和接受。那在什么样的场景下使用什么样的图表类型，以及如何去使用、怎么去落地实现，我有一些可以分享的经验。

下面分析三种常用的图表（柱状图、折线图、饼图）和表格的设计。

一、柱状图

1. 基本定义：用垂直的柱子展示多个分类的数据变化和同类别各变量之间的比较情况。能展示数据的变化趋势，并非它的强项。
2. 适用：根据时间等维度对比分类数据。
3. 局限：分类过多则无法展示数据特点。
4. 展示形式：

* 分类数据字段映射到横轴的位置
* 连续数据字段映射到矩形的高度
* 分类数据也可以设置颜色增强分类的区分度（图例）
5. 注意点：
* 图例的位置：常见的位置有三种，图表的上方、下方、右侧。当图例个数较少时，可根据想要体现的重点来确定图例的位置。但图例放在下方会占据单独一行的纵向空间，放在上方时可同其他的筛选条件或者图表标题同行，从而不单独占据一行空间。当图例个数较多时，上方和下方无法展示完整图例内容，这时右侧会更合适。一般考虑到平台的统一性和扩展性，推荐图例放在图表右侧。
* X轴文字过长解决方案：
使用柱状图的时候经常会遇到横坐标文字太长的情况，常见的解决方案有顺时针倾斜、逆时针倾斜。2种倾斜方式没有特别突出的优缺点，因为不清楚用户明确的阅读顺序和留线。倾斜坐标带来2个问题，一是如果文字仍然过长的话需要固定文字的长度，超过显示省略号。二是区别日常阅读习惯，给用户带来阅读难度，且文案可能展示不全。通过hover说明文字可以查看完整的坐标文字。

还有一种特别的方案，将整个图表旋转90度即可，也就是条形图。当横坐标标签个数过多且文案太长，柱状图展示已经过分拥挤了，可以采用条形图，反之可以继续使用柱状图。在网页中，较多场景是需要控制使用纵向空间的，且柱状图的高度是一定的，但是条形图的动态变化可能会变更高度。因此具体采用哪种图表需要根据场景和需求来定。
* 落地效果：图表的取值范围应该是动态计算的，固定图表的高度。根据数据大小动态变化，比如纵坐标数值最大本来是50，切换筛选范围后，最大的矩形数值为37，那么纵坐标最大值应该调整为40（纵坐标间距为10个数值单位）。

虽然目前常见的图表框架基本可实现该效果，但仍需和研发沟通清除并确认实现效果 ，保证不会出现下图的情况，柱子的高度应该占据大部分的空间：

二、折线图

1. 基本定义：直接将数据的变量和值标记在二维坐标系上而后连线。
2. 适用：能将这些点直接相连，说明变量（即x）是有连续性的，而最常见的有连续性的日常概念，是时间。所以折线图是特别适合用来表达一些值随着时间的变化而变化的数据。
3. 局限：在线条交错与线条较多的情况下识别性会变差。
4. 展示形式：

一般X轴用来表示时间的推移，并且间隔相同；Y轴代表不同时刻的数据的大小。
5. 注意点：
* 图例的位置：同柱状图
* Y轴的间距：折线图常用于表示数据的变化和趋势，坐标轴的不同对折线的变化幅度有很大的影响。坐标设置的间距过小或者过大，趋势会过于陡峭或者平缓，效果都大打折扣。另外要客观反映真实数据，纵坐标不能被截断，否则视觉感受和实际数据相差很大。左图的数据起始点被截断从10开始。

建议折线的数值范围不小于Y轴数值范围的2/3，下图的展示效果都是可以的，具体的需要根据数据情况和研发确认数据设定要求。

三、饼图

1. 基本定义：通过将一个圆饼按照分类的占比划分成多个区块，整个圆饼代表数据的总量，每个区块（圆弧）表示该分类占总体的比例大小，所有区块（圆弧）的加和等于 100%。
2. 适用：表示不同分类的占比情况，通过弧度大小来对比各种分类。
3. 局限：不适用于多分类的数据，一张饼图不应多于 9 个分类，因为随着分类的增多，每个切片就会变小，最后导致大小区分不明显，每个切片看上去差不多大小，这样对于数据的对比是没有什么意义的。
4. 展示形式：

分类数据字段映射到扇形的颜色
分类数据占比大小映射到扇形的面积
5. 注意点：
* 图例位置 ：同柱状图
* hover说明文字：所有图表都应该有hover后的说明文字，这边特别说明下饼图不仅要展示占比的数据，可以另外补充展示具体的数值，
* 数值展示顺序：推荐自12点位置顺时针从大到小展示的方式。人的阅读习惯是从左到右，从上到下，所以数据从大到小排列，更有助于阅读，图形也更具美感。特殊需求情况需要从小到大也是可以
* 占比数据展示：饼图通过扇形和颜色让用户有直接的占比结果感知，因此可将占比数据隐藏到hover说明文字中，如果有强烈直接展示所有图例数据的占比数据，可采用下面的方式：

* 数据过多的解决方案：如果数据超出9个的时候，占比较小的那些数据在饼图中展示出的效果很小，意义不大，此时有2种解决方案：一种是取占比考前的top8的数据，余下的数据通过“其他”展示：

一种是转化为其他的图表形式，比如柱状图或者条形图。

四、表格

数据可视化页面经常将总体数据和单条数据结合展示，单条数据的展示就需要用到表格。表格大家都很熟悉，但是在使用表格展示数据的时候，也有些注意点。
* 基本对齐要求：表头和内容需要保持相同的对齐方式：左对齐/右对齐，不建议使用居中对齐，字段的长短不明确，居中对齐，视觉起点过于跳跃，阅读流畅度低。

* 文本对齐方式：基本采用左对齐，符合从左到右的阅读习惯
先来看一个全部左对齐方式下的表格展示效果：

是不是比居中对齐更整齐，文本的阅读更顺畅？但示例中的数字显得不是那么整齐，需要仔细去观察数值才可以进行做到大小的比较，那么这种效果也不是我们想要的。
* 数字对齐方式：
数字建议采用右对齐，如果表格中数字类列数不多且数字长度较短（所数值范围在千以下），也可采用左对齐的方式。

* 百分比的问题：
建议右对齐，保证百分号对齐，采用相同有效位数，保留小数点末尾0。可以通过对比看下效果：

* 使用等宽字体：等宽字体和比例字体的区别，在于比例字体即每个字母宽度是按一定比例自动调整的，而等宽字体是固定宽度，固定间距，字体的每一个字母和字符所占的水平空间都是相同的。

同样都是万级的数字，"14,111"数字中出现的“1”较多就会导致上下同样位数的数字错位，这样很容易误导观者，第一感知上“1”多的数字偏小。
* 表格总体展示效果：遇到表格中数值列较多的情况建议将数值列贴近排列，文本列贴近排列，大的规则建议：文本左对齐，数值右对齐

五、图表使用规则(完整版)

国外的图表专家Andrew Abela曾总结了一份图表类型选择指南,将图表需要展示的关系分为以下几类：比较、分布、构成、联系。站在巨人的肩膀上，根据他给出的关系整理出下面这份图表使用规则图：

得到数据后，可以先按照以上原则去确定可使用的图表，再根据细致的场景需要做选择。（图中未在本文介绍的图表比如玫瑰图，大家可以去AntV了解下）
写在最后：一般场景下数据分析的维度和复杂度并不高，因此类似堆叠柱状图等较为复杂的图表就不一一介绍了，本文仅介绍了最基本的使用方法，更复杂的可以自己举一反三得到。当然，期待大家给出更多的建议和意见。