# 坐标轴
# 名词定义
坐标轴指二维空间中统计图表中的轴,它用来定义坐标系中数据在方向和值的映射关系的图表组件。
# 何时使用
坐标轴和坐标作为图表的引导元素,可以帮助你将图形与原始值进行映射关联。在二维笛卡尔坐标系中,轴通常为水平方向的横轴(X 轴)和竖直方向的纵轴(Y 轴)。极坐标系中,轴分为切向的切向轴(Angle)和径向轴(Radius)。
# 构成元素
坐标轴主要构成元素包括:轴标题(单位)、轴标签、轴线、刻度线、网格线。
根据对应变量是连续数据还是离散数据,映射轴可以分为:分类轴,时间轴,连续轴。
# 使用建议
# 轴标题
通常都建议加上轴标题解释轴的含义。当图表其他部分的内容(图表标题,图例、轴标签等)已经能充分表达数据含义,无需单独显示轴标题。
轴标题主要用于标识数据的度量单位,例如:数值百分比(%)、年龄(岁)、金额(亿元)或 科学计数法单位(k/m/g)。如果度量单位显而易见,例如:日期时间(年/月/日),则不需要在图表中包含坐标轴标题。
# 轴标签
轴标签的设计较为复杂,涉及到的细节点比较多。这里将围绕直角坐标系的 X 轴和 Y 轴这两个方向进行讨论。
# X 轴标签
x 轴标签的设计重点在显示规则上,在可视化图表设计中,我们常常会碰到轴标签内容过长的情况,当空间有限时,轴标签会重叠在一起。如何处理此类问题,这里根据轴的不同类型给了对应的解决方案 。
- 连续/时间轴标签
在连续轴和时间轴中,我们可以利用抽样显示的手段来优化轴标签重叠的问题。这里不推荐使用旋转来缩减宽度。一方面从美观度上,旋转可能会破坏界面整体协调。另一方面,连续/时间轴并不需要显示所有的轴标签,参考格式塔中的[连续性原理],尽管轴标签未能完全展示,但用户会在脑海中把缺失的部分补齐,轴标签仍然会像连续着的一样。
- 分类轴标签
在分类轴中,由于标签与标签之间并没有紧密的逻辑关联关系。若采用抽样规则,隐藏了一些标签,则加大了用户对图表信息的提取难度,这是我们不想看到的。对于分类轴,这里建议通过标签旋转或转换成其他图表(条形图)来缩减宽度。
# Y 轴标签
Y 轴标签的设计重点在标签数量、取值范围和数据格式上,标签显示区域一般根据最长标签宽度自适应缩放。如果数组是固定的,就写成固定宽度,节省图表计算量,提高渲染速度。
- 标签数量
轴标签的数量不建议过多,太多的标签必定导致横向网格线变多,造成元素冗余,干扰图形信息表达。根据 7±2 法则,Y 轴标签数量应尽量控制在这个范围内。
如果图形区域内有数据标签,则轴标签可以考虑隐藏。
- 取值范围
一般来说,Y 轴标签的取值应从 0 基线开始,以恰当反映数值。展示被截断的数据可能会误导用户做出错误的判断,比如数据本身没有那么起伏变化,通过处理上下限的颗粒度,把刻度拉长,一样能显得“长势喜人”。
从上面就能明白,在看图表的时候千万不要被表面给欺骗,仅仅观看柱状图的高低趋势往往不能得出正确结论,需要注意坐标轴起始位置有没有被人做过虚假处理。
在折线图中,取值一般保证图形约占绘图区域的 2/3,或者将柱状的高度控制在图表高度的 85% 左右。
虽然这种方式确实会让图表显的更好看,但考虑到实际数据有的时候会出现极限情况,比如有些特别大有些特别小,为了保证用户能从图表中准确地获取信息,不应该为了美感而破坏了它的真实性。
- 数据格式
关于 Y 轴标签的数据格式,这里重点讲一些比较容易忽视的设计细节。
1、标签保留的小数位数保持统一,不要因为某些轴标签是整数值,就略去小数点。
2、正负向的 Y 轴标签,由于负值带“-”符号,整个 Y 轴看起来会有视觉偏差,特别是双轴图的右 Y 轴更明显。这里建议正负向 Y 轴给正值标签带上“+”,以达到视觉平衡的效果。
# 轴线
轴线一般只考虑是否显示,在有网格线的情况下,柱状图/折线图会隐藏 Y 轴线,条形图则是隐藏 X 轴线,以达到信息降噪,突出视觉重点的目的。
# 刻度线
刻度线是轴线上的小线段, 可以提供数值标签在坐标轴上的明确位置。轴刻度线有 3 种类型,分别为:置内、置中(即交叉方式)、置外。但刻度应置于数值坐标轴外侧, 不建议刻度采用置中或置内方式显示。
轴刻度线的使用就是加强映射关系,快速的对应到数据点。分类轴较多出现在柱状、条形中,对于映射有天然的对应关系,故在分类轴中习惯隐藏轴上的刻度线。
# 网格线
网格线是用来辅助图表优化映射关系的。使用网格线可以增加数据的可阅读性,网格线提供了两种功能:一是延伸数值刻度至可视化对象中,以便观察数据值之大小;二是增加可视化对象之间的比较基础,利于比较。
网格线一般跟随值域轴的位置单向显示,柱状图采用水平网格,条形图采用垂直网格。在使用网格线时,应该注意遵从主次原则,以轴线为主,网格线为辅,样式上可采用实线或者虚线。避免颜色过重,不要使用纯黑或者纯白,在视觉层级上不能抢了图表中的信息。
# 双轴图
顾名思义,双轴图共用 Y 轴值域区间,它含有两个 Y 轴左标轴,左右各一个。双轴图的使用大大提高了屏效。
- 尽量保证基线从「0」开始,且左右 Y 轴分段数量一致;
- 建议两组数据的 Y 轴单位是不同的,比如一组为「人数」,一组为「百分比」;
- 建议开启轴标题。