数据可视化这个词的使用频率也越来越高

数据可视化这个词的使用频率也越来越高，而图表是数据可视化中最常用的一种表现形式。无论是工作汇报还是后台设计，都离不开图表的使用。然而关于图表类相关的资料太零碎了，不成体系，对于初学者非常不友好，本篇文章我从图表的祖辈开始，把它都给挖了出来，希望对你有帮助（如果图片看不清，可以点开放大看~）。

一、什么是图表

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

英文叫法：Chart。

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

接下来我们来介绍图表的具体构成及元素解析。

二、图表的构成

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

三、图表元素解析

3.1 标题

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

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

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

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

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

3.2 图例

3.2.1 图例的组成

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

3.2.2 图例的展现形式

圆形、开关、矩形、鼓包线、实线、虚线。

3.2.3 图例的位置

从左至右、从上至下。

3.2.4 图例的作用

• 标识出每个颜色所代表的的类别；
• 开启 / 隐藏数据显示；
• 图例显示的数值一般为当前值。

3.2.5 图例的颜色选择

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

产品使用中，要规范图例颜色使用，一般分为两种：

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

3.2.6 图例过多时如何展示

• 如果图例可整合前提下，展示主要图例 / top n 图例，其他的图例做整合，增加个详情页来展示完整的；
• 如果图例不可整合/省略，则需要给出足够的展示空间。

3.2.7 共用图例

如果多个 chart 的图例一样，可进行合并，减少冗余图例。