标题在图表上_数据可视化 图表

图表是数据可视化的常用表现形式，是对数据的二次加工，可以帮助我们理解数据、洞悉数据背后的真相，让我们更好地适应这个数据驱动的世界。无论在工作汇报、产品设计、后台设计以及数据大屏中都能看到它的身影。然而，在实际工作中我发现很多初入行的设计师对于图表设计并不是很了解，同时市面上对于这方面的资料相对零散，不成体系。所以我结合了平时工作中的理解，梳理了这篇文章，希望能帮助到大家。

一、图表的组成

1. 图表的构成

当我们把图表的结构进行拆解后，就会发现一个图表是由很多个细小构件组成的，这些构件有自己的名字和用途，分别是标题、轴、图形、图例、标签、提示信息。在平常使用的过程中，会根据场景去修饰删减一些构件元素，以此来减少冗余信息，用最适量的数据墨水比(Data-ink Ratio)，帮助用户快速达成目标，在最少的时间内获取更多的信息。

• 标题 - 描述图表的主题(包含主标题和副标题)

• 标签 - 对当前这一组数据进行的内容标注

• 轴 - 用来定义坐标系中数据在方向和值的映射关系

• 图例 - 对图形本身的概括

• 提示信息 - 当tap或者hover的时候，以交互提示信息的形式展示该点的数据详情

• 图形 - 统计图表的视觉通道在形状上映射的视觉展现

接下来，我会一点一点地为大家讲解它们，方便大家合理的使用它们。但在此之前，我们先来了解一个知识点 - 数据墨水比，以便更好的理解接下来的内容。

2. 数据墨水比

数据墨水比——"data-ink ratio"，是1983年视觉大师爱德华·塔夫特(Edward Tufte)在《The Visual Display of Quantitative Information》中提出的一个概念：一幅图表的绝大部分笔墨应该用于展示数据信息，数据变化则笔墨也变化。他将数据油墨比定义为图表中用于数据的墨水量除以总油墨量。其中数据墨水指的是图表中不可删除的核心内容。比如，我可以删除图例、删除坐标轴、删除网格线，这可能不会影响你从图表中读取相关的信息。但如果我删除柱形图、饼图这些图表的主体元素，那么图表就失去所要表达的内容了。

我个人更喜欢用“信噪比”= 信号/(信号+噪音) 这个概念去理解，因为通过可视化传达的信息不仅仅是数据，还有业务洞察，像观点、结论性的信息往往需要用文字来呈现的也是至关重要。不过无论使用哪个词，最终的目的都是突出传达“信息”部分，去除那些干扰的“噪音”。

因此，图表中的数据墨水占比越多，那么该图表的冗余信息就越少，信息传递效果就越好。所以，在创建图表和图形时，我们的目标应该是在合理范围内最大化数据墨水比。

二、图表元素详解

1.标题

一个明确、相符的标题可以迅速让读者理解图表要表达的内容。通常图表的标题是根据图表所需要表达的内容决定的，大多数小伙伴可能认为命名没有太多问题。但当这个图表的结论是单一且唯一的时候，建议在概括图表内容的标题中加入结论性的信息点。这样能减少读者误解你的意图的可能，而且能够确保他们将注意力集中于你想着重强调的数据上 。

2. 轴(坐标轴)

2.1 定义

轴是能够使每个数组在维度空间内找到映射关系的定位系统，更偏向数学/物理概念。换句话说，轴的功能像是把可视化对象置于共同的基准上，再以标尺进行数值量测。在数据可视化中，一般存在于笛卡尔坐标系(直角坐标系)和极坐标系中。对轴进行「原子」要素的拆分，我们可以得到以下几种元素，分别为：轴线、轴刻度线、轴标签、轴标题(单位)以及网格线。

2.2 分类

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

2.3 使用建议

2.3.1 轴线

轴线一般只考虑是否显示，结合上面所讲的数据墨水比，在有网格线的情况下，柱状图/折线图会隐藏 y 轴线，条形图则是隐藏 x 轴线，以达到信息降噪，突出视觉重点的目的。

2.3.2 轴刻度线

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

轴刻度线的使用就是加强映射关系，快速的对应到数据点。分类轴较多出现在柱状、条形中，对于映射有天然的对应关系，故在分类轴中习惯隐藏轴上的刻度线。

2.3.3 网格线

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

网格线一般跟随值域轴的位置单向显示，柱状图采用水平网格，条形图采用垂直网格。在使用网格线时，应该注意遵从主次原则，以轴线为主，网格线为辅，样式上可采用实线或者虚线。避免颜色过重，不要使用纯黑或者纯白，在视觉层级上不能抢了图表中的信息。

2.3.4 轴标题 

轴标题(单位)主要用于说明定义域轴、值域轴的数据含义。当可视化图表的其他部分内容(标题、图例、轴标签等)已经能充分表达数据含义，根据奥卡姆剃刀定律，可以略去轴标题，近一步增大数据油墨比，精简画面元素。

2.3.5 轴标签 

轴标签的设计较为复杂，涉及到的细节点比较多。这里将围绕直角坐标系的X轴和Y轴这两个方向进行讨论。

X轴标签

x 轴标签的设计重点在显示规则上，在可视化图表设计中，我们常常会碰到轴标签内容过长的情况，当空间有限时，轴标签会重叠在一起。如何处理此类问题，这里根据轴的不同类型给了对应的解决方案 。

A. 连续/时间轴标签

在连续轴和时间轴中，我们可以利用抽样显示的手段来优化轴标签重叠的问题。这里不推荐使用旋转来缩减宽度。一方面从美观度上，旋转可能会破坏界面整体协调。另一方面，连续/时间轴并不需要显示所有的轴标签，参考格式塔中的[连续性原理]，尽管轴标签未能完全展示，但用户会在脑海中把缺失的部分补齐，轴标签仍然会像连续着的一样。

B. 分类轴标签

在分类轴中，由于标签与标签之间并没有紧密的逻辑关联关系。若采用抽样规则，隐藏了一些标签，则加大了用户对图表信息的提取难度，这是我们不想看到的。对于分类轴，这里建议通过标签旋转或转换成其他图表(条形图)来缩减宽度。

Y轴标签

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

A. 轴标签的数量

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

B. 轴标签的取值范围

一般来说，y 轴标签的取值应从 0 基线开始，以恰当反映数值。展示被截断的数据可能会误导用户做出错误的判断。比如数据本身没有那么起伏变化，处理上下限的颗粒度，把刻度拉长，一样能显得“长势喜人”。

从上面就能明白，在看图表的时候千万不要被表面给欺骗，仅仅观看柱状图的高低趋势往往不能得出正确结论，需要注意坐标轴起始位置有没有被人做过虚假处理。

但存在是有根源的，对于此类的取值方式不做过多评价。这里主要想讲一下我常用的取值方式：对于Y轴的上限即最大值根据实际数据进行动态计算。比如一排数字中最大的为1190，那么轴标签最高位为1200；一排数字中最大的是1210，那么轴标签最高位为1400。其中的1400和2100是根据轴上的分段数决定的。

但有些人对Y轴标签的取值给出了如下建议：在折线图中，取值一般保证图形约占绘图区域的2/3，或者将柱状的高度控制在图表高度的85%左右。

但我认为这种方式太刻意了，并且规则定制的比较细。但是得承认这样子确认会显的好看，做案例可以，做真实数据不行。因为考虑到实际数据有的时候会出现极限情况，比如有些特别大有些特别小，为了保证用户能从图表中准确地获取信息，不应该为了美感而破坏了它的真实性。因此并不推荐用这种方式来取值。

C. 轴标签的数据格式