数据可视化设计必修课（一）：图表篇

图表是数据可视化中最常用的一种表现形式，一定要吃透它。

随着互联网数字化越来越完善，数据可视化这个词的使用频率也越来越高，而图表是数据可视化中最常用的一b + + k种表现形式。无论是工作汇报还是后台设计，都离不开图表的使用。然而关于图表类相关的资料太零碎了，不成体系，对于初学者非常不友好，本篇文章我从图表的祖辈开始，把它都给挖了出. 8 G a = Q h来，希望对你有帮助。

什么是图表

图表的定义：可直观展示统计信息的属性，对知识挖掘和} w c O信息直观生动感受起关键作o _ )用的图形结构，是一种很好的将对象属性数据直观、g A i ) ; 5形象地可视化的手段。

英文叫法：Chart。

用户对图形的敏感程度远远大于文字，所以产品就需要把数据信息可视化，用简单的图形表示出更多的信息量，而图表是数据可视化中最常用的表现形式。

接下来我们来介绍图G K | ! Y表的具体构成及元素K i T ( B解析。

图表的构成

图表是由：标题、图例、刻度轴、数据展示、网格线、提示信息、水K Y ^ ) k ~ P X位线、时间轴组成，每一个元素都有它存在的意义。在实际使用中不一定非得把元素全部展示出来，精简化显示想要展示的内容即可。

图表元素解析

1. 标题

顾名思义，标题就是图表的名字，标题是必S b `不可少的元素。标题的内容一定要言简意赅，不要太长，能两个字写清楚绝对不用三个字。

标题的常用位置有 3 个：左上角、顶部居中、底部居中。

一般情况下，标题字号 / 色值要突出一些，用户第一眼看到 chart 的时候，要清晰的看到这个图表是做什么的。

特殊情况下，如果需要对标题有额外解释的话，两种展现形式：

• 增加提示图标；
• 增加提示语。

2. 图例

图例的组成

颜色、名称、数值、单位。

图例的展现形式

圆形、开关、矩形、鼓包线、w @ V ; 4 j实线、虚线。

图例的位置

从左至右、从上至下。

图例的作用

• 标识出每个颜色所代表的的类别；
• 开启 / 隐F i D j + 1 藏数据显示；
• 图例显示y _ M S G 0的数值一般为当前值。M C f u j ( 7 l

图例的颜色选择

同一组G G k w L ~图例中，不要出现相近的颜色，否则在图表显示中分不清彼此。

产品使用中，要规范– X ; P ? ? M ?图例颜色使用，一般分为i ~ } p + K P ( E两种：

• 常用的图例颜色（颜色本身代表着行业中的某种含义），此类k ] t 5 q +颜色需要是固定色值，无论哪个 chart 中，都是这个颜色；
• 无特殊含义的图例，可以规范出一个图例颜色的使用顺序表。那些无特殊含义的 chari V 2 L r { a #t 可以按顺序使用图例颜色，图例整齐划一。

图例过多时如何展示

• 如果图例可整C v k Z (合前提下，展示主要图例 / top n 图例，其他的图例做整合，增加个详情页来展示完整的；
• 如果图例不可整合/f ; T省略，则z . { c e V T需要给出足够的展示空间。

共用图例

如果多个 chart 的图例一样，可进行^ { / @ z _ 7合并，减少冗余图例。

图例省略

如果 chart 中只有一个图例的话，可省略。

图例名称限制

根据不同使用场景，为了更好的展示效果，要给图例名称设置一个最大值，超过最大值后省略展示% c Z。

3. 坐标轴

坐标轴分为 X 轴和 Y 轴，常规情况下为 1 个 X 轴+1 个 Y 轴。不过特殊情况下也会用到 2X+Y 或 X+2Y。

刻度值代表的意义

• 时间点：12:00；
• 时间段：周一、周二。

坐标轴使用规则

是否带单位：

• 如果刻度值的含义明确的情况下，可以不用带单位，比如：2018、2019、2020…；
• 如果刻度值含义有歧义的情况下，必须加上单位（具d p C l E体是统一一个位置加单位，还] a Y 0是每个刻度值上加单位，则需要s y J c A $根据场景来判a J W ] ( ) . B断）。

对齐方式（常用，~ Z M n N W f #但非必须）：

• X 轴_ – o ~：居中对齐；r N e k D h
• Y 轴：右对齐。

刻度P b @ k o值过多时如何显示：l : { t }

• 可选择规律性省略刻度名称；
• 倾斜b ` w I i } r 文字以显示更多的文案。

刻度值的选用一定要是同一个规律，禁止同距离的刻: ( = f ! 6 | = ;度值代表不同数据。

刻度点的样式使用规则：

刻度的线朝3 @ V w J ~ .外。

4. 数据展示

数据的展示是V y c m chart 中最为明显的地方，可以说如果只显示 2 ` x 8 E $ k一个元素的话，就是他了。

数据展示的使用规则：

• 边界要清晰，不可虚化；
• 多个数据同时显示的时候，要保证每个数据都能清晰的看到，可以采用透明度来保证所有数据的显示。

5. 网格线

网格线的作P 1 T $ q用

呼应坐标轴，美观度。

网格线的使用规则

• 线的颜色要弱化，不要喧宾夺主；

网格线使用实线居多，尽量不用虚线。

使用场景

横、纵、横纵结合、无网格线。

6. 提示信息

通常情况下，提示信息用来标识出k y F 9 m V r 5 chart 中重要点的数据信息，需要注意的是：重要信息尽量简化，信息量不要太大，言简意赅就好。

7. 水位线

根据不同产= % n Y w ? R k品的使用场景，有的时候会用到阈值，当达到某个阈值后，就会触发某种联动。这个时候就需要有个水位线了，它起到警示的作用。

形式有两种，实线和虚线，颜色的选取则取决于产品的警告级别。

水! G @位线可以是一个，也可以是多个，. Z t ` (视情况而定。

8. 时间轴

时间轴可以灵活地调节刻度值的上下限，从而更精确的看i ! %到自己想看的数据。

时间轴的功能及限制没有不是很复杂，所以就不过多解释了，需要用的话就用。

图表使用建议

1. 折线图 line

定义

折线图可以显示随时间（根据常用比I s M = m /例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。折线图是通过线条的波动来表示数据的波动，主要体现的是数据随着时间的推移而变动的图表。

使用场景

常用于观察一段时间内数据波动的{ F s浮动变化，s J )比如：一天内内存^ v `的使用情况。

使用建议

Y 轴刻度值选y 6 6 M择要合理，当前显示的数据波动m f (要最大化的显示；

重要节点可E = / v ) 9以单独做重点标s D 6注；

数据拐点# 5 r p Q ) p 3 j要平滑，不要太锋利。

2. 面积图 area

定义

面积图和折线图比较类似，区别在于面积图把数据区域做了个面积划分，让数据的显示更加清晰。

使用场景

面积图展示尽量不要超过 3 个图例，否K E :则数据多的情况下，数据的展示会特别乱，影响观看。

使用建议

面积区域要和折线的颜色用统一色系，不要换色系；

面积区域一般要比折线颜色浅一些，这样视觉上更加[ d p M S让人舒适；

如果多条F $ y X V f数据情况下也用面积图的话，面积区域尽量使用透明度，否则有的数据会被遮挡看不到。

3. 柱状图 bar

定义

柱形图，又2 I y S U ~称长条图、柱状统计图。用来比较两个或以上的价值（不同时间或者不同c 5 4 } +条件），只有一个变量，通常利用于c x _ b 7 / v } *较小的数据集分析。

使用场景

• 柱状图分为横向和纵向w Q H两种展现形式；
• 用于在同一维度下不同数据的对7 U K E N S J Y比，用柱状图更能清晰的对比出数据的差异化。

使用建议

柱状图的厚度不: , a } K M 2 w +要是固定值，要做成自适应来应对不j u 同尺寸的分辨率显示；

厚度与间距的对比要合理设计；

可使用小圆角Z ? { = ~ 5 e [，千万不要用大圆角，太丑了……

如果想要强调某个柱子的话，可以进行颜色区分，但是柱子颜色不要超过 20 8 : K I S 个（同一维X { / t _ 5 i j 9度下）；

如q t } k / * ] r果想要在柱子E / V D上显示数值的话，使用建议（下面的顺序为推荐顺序）：

• hover 的时候出现数值；
• 数值默认在柱子上显示；
• 数值在柱子顶部 / 右侧显示。

4. 饼图U # 6 y K R 3 & pie

定义

饼图仅排列在工作表的一列或一行中的数据，它是有一个p ? ` N : O n总和数据，方面查看 ( Z B N P每个类别分别占总数据的百分比的一种图表。

使用场景

• 常用于D ~ 0 g C | d H s做总结、年度汇报等；
• 所有数据相加必须是 100% 才可用。

使用建议

• 每个数据要x s K $ ~ , U 使用单独的颜色来表示，不要有相同颜色；
• 饼图中不能有负值；
• 图例数u 0 ) h m u量没有限制，j 5 c { f 2 P n但是如R x h果遇到可以合并l c 6的图例，可以进行合并；
• 饼图的开始点为 0/12 点位置。= , + D X ^

5. 环形图

定义

环形图是由两个不同大小的圆叠在一起，切割中心部分得到的一种g B 9图形。

使用场景

• 环形图有一个独有的特点a 2 + v 3 ;，就是可以在中心圆的位置突出某一项指标的数值。
• 它常用于做数据的监控，监控某一类指标是否正= d N – / D 8常。

使用建议

• 环形图的开始点为 0/12 点位置；
• 环的粗细要合理，不要太粗和太细；

环形图的两个圆要从中心对齐。

6. 堆叠面积图

定义

堆叠面积图是把数据面积按顺序逐步堆叠起来的一种图形。

使用场景

常用于不同资源中流量 / 容量的使用。

使N S 8用建议

• 不要有重复的颜色；B ^ K K
• 尽可能的把数据量按大小的顺序，由下至上的堆叠。

7. 堆叠柱状图

定义

堆叠柱状图是把数据柱状图按顺序逐步堆叠起来的E 7 ^ 9 / _ = z一种图形。

使用场景

常I o W n Z y /用于不同维度下相同几个指标的展示s w V o o C。

使用建议

• 不要有重复的颜色；
• 按重要等级由下至上排序。} N f

8. 非常用图表

上面介绍了常用的图表的使用建议，但是图表类型远远不止于此，还有很u ) L R I ; u多非常用的图表类型，这次我先给大家列出f M 5 s q ] :来，如果大家感兴趣的话，我后面再写一期冷门图表. i I c M的使用建议：

雷达图，散点图，K 线图，盒须图，热力图，旭日图，桑基图，树图，漏斗图，仪表盘。

常用的图表开源网站

1. echartsecharts

网站链接：https://ec/ 6 z 2 , H U Qharts.apache.org/zh/indexi m _ T (.html

2. highcharts

网站链接：https://www.highcharts.c. ! ? – J 3 !om.cm O ` I D r P Mn/

3. antv

网站链接：https://antv-g2.gitee.io/zh/examples/gallery

总结

Chart 是数据可视化必修课中最重e r c要的模块之一，不可忽略。只有了解每个 chart 的定义及使用场景，才能在产品中用到最合适的那一个。

欢迎关注作者微信公众号：「友设青年」