不知道你发现了没，越来越多的驾驶舱、大数据管理等大数据管理平台相继出现，你在卖产品的时候不谈大数据，不谈数据分析，你都不好卖掉你的产品。可想而知，现在的市场，大数据有多么的重要。

但是人类分析数据的能力已经远远落后于获取数据的能力。

这个挑战不仅在于互联网高速发展，数据量越来越大、越多元化，更重要的是数据获取的动态性。

但是数据内容的噪声让人们在庞杂的数据世界中倍感枯燥繁琐，同时传统的数据分析报告对于非专业人员来讲有一定的门槛，其理解成本较高。这就让数据可视化的出现赋予其特有的意义。（ps：作为可视化设计师，立马昂起头迎接使命）

前面聊B端设计规范的时候聊到后台设计，B端后台管理产品恰恰是数据图表可视化需求最多的地方，所以我就开始研究图表设计。

希望能通过这篇文章和大家一起交流学习，解决一些属于我们共同的问题。文章末尾会附上一些常用的具有针对性的图表组件源文件可下载，方便大家设计的时候图表复用～

数据可视化是一种以“图形语言”为主要表现形式，将复杂的、抽象的、枯燥的、专业的、不直观的数据内容，以简单、快捷的方式传递给用户。

用户可以通过如对选定范围内的数据进行分析，发现数据的周期与规律、迅速找到自己目标节点中的关键数值、对比几组数据以了解当下想要的研究对象的情况，完成自己的目标，这也是数据可视化最为明显的价值。

数据可视化最基本的设计目标就是要清楚准确的展示和传达信息，能够更高效、清晰、简洁地完成数据的对比、关键节点的查询、每组数据之间的分析等一系列交互，目的是提升工作效率，降低学习和使用成本。

在这样的前提下，针对特定的用户对象，用户场景，我们设计师可以根据用户的预期和需求，提供有效辅助手段以方便用户理解数据，从而完成有效的可视化。

具体包括：数据到可视化的直观视图，合适的视图选择与交互、展示合理的信息密度、美学聚焦与平衡、可视化隐喻等。

需要注意的是，作为设计师我们不能为了数据可视化而可视化采用复杂的图形，如果把可视化作为设计艺术创作的简单过程那就本末倒置了。

数据可视化应该是实用性与可用性的结合体，在这两者之间找到平衡点，达到有效挖掘，实现设计与功能之间的平衡。

所以追求功能的实用性和视觉交互的可用性平衡很重要。

在大数据时代背景下，数据可视化的应用领域更为广泛，比如：医疗、统计、管理、金融、娱乐、人工智能等一系列领域。

相信很多设计师在平时的UI 的设计工作中最常接触到的包括：PC 后台的数据总览、数据可视化大屏、游戏 UI、后台实时监控等。

数据可视化整体流程是包含从原始数据到用户操作的整体闭环。

从原始数据到可视空间的展示，中间包括数据处理的各阶段和可视化处理中从布局到样式的选择，最终展现出可交互式数据图表。

需要注意数据可视化的时候并不是对原始数据的无意义展示，而是要基于用户的目标经过层层的处理和优化后才能进行呈现。

1.可视化图表的选择

作为界面设计的设计师，设计做得好的标准是什么，那就是“让图说话！”

做可视化的图表设计同样的，也是让图说话，图表选择就成为了比较重要的环节，选对了图表就能更加快速、直观的传达数据信息。

那如何才能挑选合适的图表呢？

1、确定需要表达的核心目的是什么，需要表达的核心信息是什么；

2、判断数据之间的比较关系，包含：比较、分布、构成、联系等等；

3、选择对应能表达的图表类型，包含：柱状图、折线图、饼图、雷达图等等；

这里需要注意，最重要的是确定需要传达的信息是什么，这就是我们通常说的真实需求是什么。因为同一组数据，分析的角度不一样，得到的主题就是不一样的。

2.那么，如何选择图表的类型：

国外专家Andrew Abela曾整理了一份图表类型选择指南图示。

以下是总结了更加适合日常应用，使用频次更高的版本：

1、比较类

基础柱形图、多列柱形图、堆积柱形图、基础条形图、多系列条形图、堆积条形图、自定义条形图、词云图、基础雷达图、多系列雷达图、堆积柱形雷达图、柱形雷达图

2、分布类

组成瀑布图、基础箱型图、横向箱型图、分组箱型图、基础散点图、 趋势散点图、线性回归散点图

3、流程类

漏斗图

4、占比类

饼图、百分比堆积柱形图、南丁格尔玫瑰图、占比柱形图、环形饼图、百分比堆积条形图、占比条形图、多层饼图

5、区间类

范围面积图、百分比刻度槽型仪表盘

6、趋势类

变化瀑布图、动态轮播条形图、基础折线图、阶梯折线图、曲线折线图、堆积折线图、颜色分段折线图、数据轮播折线图、双轴折线图、基础面积图、阶梯面积图、曲线面积图、堆积面积图、百分比堆积面积图、基础甘特图

7、层级类

纵向框架图、发散框架图、矩形树图

图表一般是由：标题、图例、刻度轴、数据展示、网格线、提示信息、水位线、时间轴、Hover Tooltip等构件元素组成。

但是，在实际应用中不一定要将全部元素展现出来，会根据场景去修饰删减一些构件元素，以此来减少冗余信息，用最适量的数据墨水比，帮助用户快速达成目标，在最少的时间内获取更多的信息。

下面来对这些元素分别进行说明：

一、标题 

描述图表的主题（包含主标题和副标题），一个明确、相符的标题可以迅速让读者理解图表要表达的内容。

二、标签 

对当前这一组数据进行的内容标注，包括数据点、拉线、文本数值等元素，根据不同的图表类型选择使用。

三、轴 

用来定义坐标系中数据在方向和值的映射关系，轴的功能像是把可视化对象置于共同的基准上，再以标尺进行数值量测。

在数据可视化中，一般存在于笛卡尔坐标系（直角坐标系）和极坐标系中。

如果对轴进行要素的拆分，可以得到以下几种元素，分别为：轴线、轴刻度线、轴标签、轴标题（单位）以及网格线。

3.1 轴线

需注意，轴线一般可考虑是否显示，比如，柱状图/折线图会隐藏 y 轴线，条形图则是隐藏 x 轴线，以达到信息降噪，突出视觉重点的目的。

根据对应变量是连续数据还是离散数据，轴可以分为：分类轴，时间轴，连续轴。

3.2 轴刻度线

轴刻度线是轴线上的小线段， 可以提供数值标签在坐标轴上的明确位置。轴刻度线有3种类型，分别为：置内、置中（即交叉方式）、置外。但刻度应置于数值坐标轴外侧， 不建议刻度采用置中或置内方式显示。

3.3 网格线

网格线是用来辅助图表优化映射关系的。使用网格线可以增加数据的可阅读性，网格线提供了两种功能：一是延伸数值刻度至可视化对象中，以便观察数据值之大小；二是增加可视化对象之间的比较基础 ，利于比较。

网格线一般跟随值域轴的位置单向显示，柱状图采用水平网格，条形图采用垂直网格。

在使用网格线时，应该注意遵从主次原则，以轴线为主，网格线为辅，样式上可采用实线或者虚线。避免颜色过重，不要使用纯黑或者纯白，在视觉层级上不能抢了图表中的信息。

3.4 轴标题

轴标题又可称为单位，主要用于说明定义域轴、值域轴的数据含义。

当可视化图表的其他部分内容（标题、图例、轴标签等）能充分表达数据含义，根据奥卡姆剃刀定律，可以略去轴标题，近一步精简画面元素。

3.5 轴标签 

较为复杂，主要来说说常用直角坐标系的X轴和Y轴。

x 轴标签

x 轴标签的设计重点在显示规则上，平时工作中常常会碰到轴标签内容过长的情况，当空间有限时，轴标签会重叠在一起。

需注意

1、在连续轴和时间轴中，我们可以利用抽样显示的手段来优化轴标签重叠的问题。

不推荐使用旋转来缩减宽度，目前我也看到很多数据还在使用这种方式。

一方面从美观度上，旋转可能会破坏界面整体协调。

另一方面，连续/时间轴并不需要显示所有的轴标签，尽管轴标签未能完全展示，但用户会在脑海中把缺失的部分补齐，轴标签仍然会像连续着的一样。

2、分类轴标签

由于标签与标签之间并没有紧密的逻辑关联关系。若采用抽样规则，隐藏了一些标签，则加大了用户对图表信息的提取难度，所以，对于分类轴，建议通过标签旋转或转换成其他图表（条形图）来缩减宽度。

Y轴标签

y 轴标签的设计重点在标签数量、取值范围和数据格式上。标签显示区域一般根据最长标签宽度自适应缩放。如果数组是固定的，就写成固定宽度，节省图表计算量，提高渲染速度。

需注意：

1、轴标签的数量不建议过多，太多的标签必定导致横向网格线变多，造成元素冗余，干扰图形信息表达。根据 7±2 法则，Y轴标签数量应尽量控制在这个范围内。

2 、一般来说，y 轴标签的取值应从 0 基线开始，以恰当反映数值。展示被截断的数据可能会误导用户做出错误的判断。

3、对于Y轴的上限即最大值根据实际数据进行动态计算。比如一排数字中最大的为98，那么轴标签最高位为100；

4 、Y轴标签的数据格式保留的小数位数保持统一。

四、图例 

对图形本身的概括，在图表元素中属于辅助内容。

1、图例的组成：图形、名称、数值、单位。

2、图例分为连续型图例和分类型图例，从位置来分又称为水平图例和垂直图例。

不同类型的图表建议选用各自的图例形态，目的是在复合型图表中可通过图例来判断图表中包含几种图表类型以作区分。

3、共用图例：多个图表的图例相同，可共用一个图例，减少冗余信息。

4、图例名称限制：有时候，图例名称可能会很长，为了达到更好的展示效果，图例名称可设定最大值同时做省略处理。

5、多折线图一般采用跟随图例。

五、提示信息 

当hover的时候，以交互提示信息的形式展示该点的数据详情，按不同的图表类型，分为悬浮、固定位置、固定在轴上、固定在图形上。

六、图形 

统计图表的视觉上映射的视觉展现，是图表的必备元素，承载着数据背后蕴含的信息。

大致可以分为六种基础样式：折线，面积，散点，气泡，饼/环，柱形，条形。

接下来详细的详细分析常见的图表类型。

一、折线图

折线图一般通过线条的波动（上升或下降）来显示连续数据随时间或有序类别变化的图表，常用于反映数据随着时间推移而产生的变化趋势、增速减率，是基于时间的图表类型。

使用建议：

1、如折线条数过多时不建议将多条数据绘制在一个图表中，这样很难看出不同类别的情况。

2、使用合适的时间间隔，使锯齿状的线条平滑。如折线上下浮动太大，可以试试拉长时间间隔。

3、善用点标记、特殊标记以及悬停方式展示数据，不适宜全部都把折线上的数据点标注出来。

4、对比数据较多的时候，可采用对比方式，分清主次，加强重要突出信息的感知。

二、曲线图

曲线图是折线图中的一种，当图表数据波动较大时，使用曲线图更能表达数据随时间变化的整体趋势或周期性。

比如采用折线图，会让图表整体比较混乱，不利于信息展示。

折线图与曲线图的区别：

折线图：更关注于点的数据，相对短的一段时间数据随时间变化的趋势；

曲线图：更关注点构成的线点数据，一段时间内整体数据随时间变化的趋势。

三、面积图

面积图原理与折线图相似，是一种随有序变量的变化，反映数值变化的统计图表。面积图是在折线图的基础之上形成的，它在折线图的基础上多了一个面积概念，填充的区域可以表示“累积”的含义（当X轴为连续的数值时）。

使用建议：

1、面积图使用透明度

在设计的时候，面积部分的颜色要带有一定的透明度，透明度可以很好的帮助使用者观察不同序列之间的重叠关系，没有透明度的面积会导致不同序列之间相互遮盖减少可以被观察到的信息。

2、当X轴数据较少，考虑其他图表

当数据值相距很远时，区域是模糊不清的，此时不太适合使用面积图展示。

3、数据系列不要超过4个

面积图只适合展现少量的数据，如果数据类别超过4个，会导致面积堆积在一起非常难以识别，建议要尽量避免使用面积图，采用相似图表来表示，比如折线图。

堆积面积图

堆积面积图是面积图里的一种分类，与面积图唯一的区别是堆叠面积图有多个数据系列，它们一层层的堆叠起来，每个数据系列的起始点是上一个数据系列的结束点。

适应用于观察多变量随时间的变化情况，且既能看到整体趋势又能看到各变量的构成情况。

使用建议：

1、堆积面积图不要超过7个数据系列，当数据系列过多时，往往造成难以观察。

2、建议堆叠面积图中把变化量较大的数据放在上方，变化量较小的数据放在下方会获得更加的展示效果。

3、堆积面积图要展示部分和整体之间的关系，所以不能用于包含负值的数据的展示。

四、柱状图

柱状图，是一种使用矩形条，对不同类别进行数值分类比较、趋势统计图表，尤其是当数值比较接近时。使用垂直或水平的柱子的长短对比数值大小，其中一个轴表示需要对比的分类维度；另一个轴代表相应的数值。

通常来说，柱形图的横轴更多会展现时间维度，用户会习惯性的认为存在时间趋势。如果遇到横轴为时间维度以外的变量，建议用颜色区分每根柱子。

使用建议：

1、柱子的宽度需要合适的尺寸

当柱子太窄时，用户的视觉可能会集中在两个柱中间的负空间，而这里是不承载任何数据的。宽度推荐使用在1/2 柱宽到 1 柱宽之间。

2、不推荐采用全圆角

保证柱形图有精确的圆角，以确保柱形顶部精确测量柱形的长度；全圆角则有可能歪曲可视化图表的表达。

3、避免适用过多的颜色

柱形图一般比较一组分类数据，柱子的高低已经传递了相关信息，不必通过颜色来区分，建议使用相同的颜色或同一颜色的不同色调，过多的颜色会增加理解成本。如果需要强调某个数据时，可以使用对比色或者变化色调来突出显示有意义的数据点。

4、采用有序排列，轴标签右对齐

对多个数据系列排序时，如果不涉及到日期等特定数据，最好能符合一定的逻辑用直观的方式引导用户更好的查看数据，比如条形图来进行展示。可以通过升序或降序排布或者其他有逻辑排序方式，可以一定程度上引导人们更好地阅读数据。

5、标签直接显示在柱体上

条形图还可以通过省略横轴和纵轴，并直接在柱子上表明数值，来降低数据墨水比，进一步提高信息的获取效率

分组柱状图

跟柱状图类似，使用柱子的长短来映射和对比数据值。使用不同的颜色或者相同颜色不同透明的方式区别各个分类，各个分组之间需要保持间隔。

使用建议：

1、分组个数不要超过 12 个，每个分组下的分类不要超过 6 个。

2、分组柱状图适合比较多组数值差异不大的数据，数据的数值差异大，建议使用双轴图。

3、 组之间的间距 > 柱子之间的间距

分组柱状图强调组的概念，组是一个个重复单元。按照格式塔原理，每两个分组之间的间距要大于组内不同系列之间的间距，以免造成视觉上错误的归类和区分。

堆叠柱形图

堆叠柱形图属于柱形图的一种，普通的柱形图数据值为并行排列，堆叠柱图则是一个个叠加起来的，用于展示数据的趋势、对比、占比，并且这些子类别一般用不同的颜色区分。

使用建议

1、纵向堆叠柱状图 – 最多不要超过6个数据。

2、堆叠柱状图不适宜展示包含负数的数据。

3、数据标签特别长时，采用水平堆叠柱状图。

双向柱状图

双向柱状图是使用正向和反向的柱子显示类别之间的数值比较，其中分类轴表示需要对比的分类维度，连续轴代表相应的数值，分为两种情况，一种是正向刻度值与反向刻度值完全对称；另一种是正向刻度值与反向刻度值反向对称，即互为相反数。

可分为垂直方和水平两个方向，其中水平双向柱状图又叫正负条形图。

使用建议

1、不适合不含相反含义的数据：比如收入和支出就适合，男女就不适合使用

2、采用色彩差异较大的颜色，保证高效的获取有效的信息。

五、饼图

饼图是把一个圆形一个划分为几个扇形的，用来描述某一部分占整体的百分比的统计图表。每个扇形的弧长（以及圆心角和面积）大小，表示该种类占总体的比例。

使用建议

1、分块数量尽量控制在5个以内，最多不要超过9个。分类的增多，每个切片的面积变小，视觉区分度随之降低。

当数据类别较多时，我们可以把较小或不重要的数据合并成第五个模块命名为”其它”。

如果一定要保证数据的完整性和准确性，此时选择柱状图或堆积柱状图或许更合适。

2、切片大小相似时，建议采用柱状图或南丁格尔玫瑰图。

人类对“角度”的感知力并不如“长度”，在需要准确的表达数值（尤其是当数值接近、或数值很多）时，饼图常常不能胜任。

3、正确放置切片位置，提高图表可读性。

大多数人视觉习惯是按照顺时针和自上而下的顺序去观察。因此在绘制饼图时，建议从12点钟开始沿顺时针右边第一个分块绘制饼图最大的数据分块，有效的强调其重要性。顺时针放置第二大份额的，以此类推，

六、环形图

环形图与饼图用法相似，适用于展示分类的占比情况，是由两个及两个以上大小不一的饼图叠在一起，挖去中间的部分所构成的图形。

环图相对于饼图空间的利用率更高，比如我们可以使用它的空心区域显示文本信息，比如标题、总数据等。

七、南丁格尔玫瑰图

南丁格尔玫瑰图是在极坐标下绘制的柱状图，外形很像饼图，但它是用半径来反映数值大小的（而饼图是以扇形的弧度来表示数据的）。

适宜用到对比不同分类的大小，且各分类值差异不是太大时。视觉上，南丁格尔玫瑰图会将数据的比例夸大。

使用建议

1、分类过少的场景，直接用饼图或者环图来表示

2、希望精确的比较数值大小时，推荐使用柱状图。

八、雷达图

雷达图是将多个分类的数据量映射到坐标轴上，可对比项目内不同属性的情况的图形。对于查看哪些变量具有相似的值、变量之间是否有异常值都很有用。

雷达图表也可用于查看哪些变量在数据集内得分较高或较低，因此非常适合显示能力

同样，雷达图也常用于排名、评估、评论等数据的展示。

每个变量都有一个从中心向外发射的轴线，所有的轴之间的夹角相等，同时每个轴有相同的刻度，将轴到轴的刻度用网格线链接作为辅助元素，连接每个变量在其各自的轴线的数据点成一条多边形。

使用建议

1、控制变量的数量

如果变量过多，也会造成可读性下降，因为一个变量对应一个坐标轴，这样会使坐标轴过于密集，使图表给人感觉很复杂，所以最佳实践就是尽可能控制变量的数量使雷达图保持简单清晰。

2、多边形数量控制在5以下

一个雷达图包含的多边形数量是有限的，如果有五个以上要评估的事物，无论是轮廓还是填充区域，都会产生覆盖和混乱，使得数据难以阅读。

3、指标变量数据点一般6个左右

指标变量过多，雷达图会显示的比较混乱。

九、散点图

散点图用于研究两个变量之间关联、分布关系的经典图表。

它适用于分析变量之间是否存在某种关系或相关性。其中，相关性包含正相关（两个变量值同时增加）、负相关（一个变量值增加另一个变量值下降）、不相关、线性相关、指数相关、U形相关等。

使用建议

1、如果数据量过少时，数据比较分散且混乱，看不出分布逻辑，不推荐使用散点图的。

2、尽量为散点图添加趋势线，需要注意的是最多2条趋势线。

3、用颜色、形状来区分不同的数据类别，但是要避免数据分类过多的情况。

十、气泡图

气泡图是散点图的变形，显示变量之间关联、分布、大小相关性的一种图表，由笛卡尔坐标系（直角坐标系）和大小不一的圆组成。
与散点图不同的是，气泡图是一个多变量图，它增加了第三个数值即气泡大小的变量，用气泡大小代替散点图中的数值点，面积大小代表数值大小。可以通过气泡的位置分布和大小比例，来分析数据的规律。

当然，气泡图也可以容纳更多维的数据，例如用第4个变量决定气泡的颜色、透明度等。

使用建议

气泡的大小应体现为面积，而非半径，绘制气泡图时，需注意气泡的大小是映射到面积而不是半径或者直径绘制的。

十一、漏斗图

漏斗图是展现业务步骤流程比较规范、周期长、环节多的单流程单向分析的图表，从上到下有逻辑上的顺序关系，适用于有固定流程并且环节较多的分析。数据是要有序的，彼此之间有逻辑上的顺序关系，阶段最好大于3个。

与饼图一样，漏斗图呈现的也不是具体的数据，而是该数据相对于总数的占比、漏斗图不需要使用任何数据轴。

通过各环节业务数据能够说明问题所在进而做出决策，能直观显示流转情况。漏斗图的“长相”，本质上是由数据决定的。

漏斗图还可扩展为“对称漏斗图”，同时对两个业务流程进行分析，对比两者的数据情况。

使用建议

1、数据要逻辑上的顺序关系

2、梯形的高度、面积都是有意义的，不应随意篡改。

十二、热力矩阵图

热力矩阵图，是通过颜色变化来显示数据，适合交叉检查多变量数据，整体观察数据之间的差异性和相关性的图表。

十三、矩形树图

矩形树图将层次结构（树状结构）的数据显示为一组嵌套矩形。树的每个分支都有一个矩形，然后用代表子分支的较小矩形平铺。

叶子节点的矩形面积与数据占比成比例。通常，叶节点会用不同的颜色来显示数据的关联维度。

十四、箱线图

箱线图又称“盒须图”，支持展现数据的上极限、上四分位数、中位数、下四分位数、下极限，垂直或水平的方式展示均可，从箱体两端延伸出来的线条称为“晶须”，用来表示上、下四分位数以外的变量。

异常值有时会与晶须处于同一水平的单一数据点表示。箱形图通常用于描述性统计。

十五、烛台图

烛台图又称“日本K线图”，通常用来显示和分析证券、衍生工具、外汇货币、股票、债券等商品随着时间的价格变动。

蜡烛图通过使用烛台式的符号来显示多种价格信息，如：开盘价、收盘价、最高价和最低价，每个代表单一时间段（每分钟、每小时、每天或每月）的交易活动。每个烛台符号沿着 X 轴上的时间刻度绘制，显示随着时间推移的交易活动。

以上主要是选用了一些工作中使用频率多的类型讲解，其中：包含商务仪表盘、地理坐标图等等使用频率少了就没有讲到。

推荐一个可采用代码的可视化图表链接，我相信开发同学应该会很开心，大大提升开发效率。

Apache ECharts：

https://echarts.apache.org/examples/zh/index.html

最后

我们对于数据可视化图表的理解与认识还是基础的，实际应用的时候还需要做到实用性与可用性的之间找到平衡点，切勿把可视化作为设计艺术创作的简单过程那就本末倒置了。在此认识理解的基础之上在一些复杂的数据结合的时候，还可以尝试大胆多视图协调关联设计，甚至可以在条件允许的情况下与产品、研发共同工作做出新的图表视图。

本次的分享到这里就结束了，希望可以对大家有帮助。有兴趣的朋友可以关注我，我们会定期分享设计、阅读的内容。

彩蛋福利：赠送大家“可视化图表组件库源文件”感兴趣的小伙伴可以都拿去！

领取方式如下：【三原设计】公众号后台,回复 “ 图表” 就可以领取了！

在这快节奏的浮躁的时代中，我们需要保持设计的初心，做有灵魂的设计，我们下篇再见~

参考文献：

《数据可视化》-陈为、沈则潜、陶煜波等编著 电子工业出版社 ；

《大数据时代》维克托·迈尔·舍恩伯格。

欢迎关注微信公众号：789研习社

Powered by Froala Editor