在日常的工作中，我们经常会涉及到各种数据图表的设计，数据图表可以直观地展示数据的变化趋势、差异和规律，使数据比较或变化趋势变得一目了然，有助于人们快速、有效地表达数据关系。那么，数据图表的基础构成有哪些？在设计过程中有哪些需要注意的点呢？今天笔者结合平时对于数据图表的一些工作经验，分享一下数据图表的基础元素构成。

更多图表干货：

工作中 B 端数据图表使用频率不多，但真的接到需求时，自己也会询问周围同事或网站，图表的类型有哪些？

根据图表元素的重要程度，我们按照“Z 轴”把粗略地把图表元素分成三类，分别为“底层元素”“中层元素”和“顶层元素”，根据视觉强度分别设计三类元素，其中底层元素最弱，顶层元素最强。通过梳理图表元素的前后关系，能够清晰把握元素视觉层级，保证信息传递效率。

1. 底层元素

由背景层和坐标轴构成，是整个图表中视觉层级最弱的部分。

2. 中层元素

中层元素内容包括图例、图形、标签、时间轴等承载主要数据信息的元素，是图表中表达数据的关键元素。

3. 顶层元素

顶层元素包括悬停样式、悬停后的提示信息等。

提示信息：当鼠标悬停在某个数据点时，以提示信息的形式展示该点的数据详情，鼠标离开时，则提示信息消失。

1. 图表标题

图表标题是对图表主题的概况，通常位于图表左上角，使用户在浏览图形时有一种先总后分的结构性浏览顺序。

图表标题示例

2. 图例

图例是对图形本身的概括，用来区分图表中不同类别代表的数据含义，它提供使用者以对照的方式来理解可视化对象的项目归类，比较常见的有分类图例和连续图例。

①分类图例

分类图例常用于解释图表中分类数据信息，由视觉标记、文本标签和值构成，其中值为非必选项。

视觉标记

同一个图表中不同的分类图例不允许使用相同或相近的颜色，以防止混淆数据类型。

分类图例中视觉标记的形状：包括圆形、矩形、实线等，视觉标记建议使用与图形区轮廓一致的几何图形；

在同一类图表类型中需使用相同的形状，不同类型的图表建议使用不同形态的图例，以确保在复合图表中通过不同形状的图例区分图表类型；

布局

分类图例一般位于图表的上方和右侧。依据人的视觉“F 型”浏览动线，从上至下，从左往右，可把图例放在图表的左上角，用户可以先看到颜色所映射的数据类型，再去看数据表现。当用户需要多次来回对照图例看图形时，可将图例放置在图表右侧，缩短用户对照图例和图形的路径，提高信息获取效率。

操作

图例可用于控制映射图形的展示和隐藏，可根据实际业务需求配置启用操作。

②连续图例

常用于解释图表中连续性数据信息，由视觉标记和边界（值）组成。

布局

建议将连续图例置于图表左上方，以保证边界（值）文字有较好的可读性。

操作

图例可用于控制映射图形的展示和隐藏，可根据实际业务需求配置启用操作。

3. 坐标系

坐标系是将两种位置标度结合在一起组成的二维定位系统，描述数据是如何映射到图形所在的平面。最常用的坐标系有两种：笛卡尔坐标系和极坐标系，均为二维坐标系。

本文主要介绍的是笛卡尔坐标系（直角坐标系）。

两种常见的坐标系

①坐标轴

坐标轴是坐标系的构成要素，是定义域轴和值域轴的统称，由轴标题、轴标签、轴线、轴刻度线、网格线组成。

轴类型

根据坐标轴对应的变量是连续数据还是离散数据，将坐标轴分成连续轴、时间轴、分类轴三大类。

轴标题

通常建议加上轴标题以表达轴的含义，当图表其他部分的内容（图表标题、图形标签）已能清楚表达轴的意义，可省略轴标题。

轴标签

1）x轴标签-连续轴/时间轴的标签显示

连续轴/时间轴，是由一组前后包含同等差值的等差数列组成，缺少几个数值也能明显看出中间的对应关系。当多个标签在容器内全显示发生重叠，我们可以利用抽样显示的手段来避免这种情况（什么是抽样呢？当多个标签在 x 轴无法完全显示，优先保留首尾标签，其余标签按同等步长间隔显示）

2）x轴标签-分类轴标签显示

分类轴由几组离散数据组成，相互之间独立存在，无紧密逻辑关联。当分类轴标签数量过多时，不建议使用抽样，可将标签顺时针旋转 45 度。

3）y轴标签-标签数量

y 轴标签的数量不建议过多，太多的标签必定导致横向网格线变多，造成元素冗余，干扰图形信息表达。根据 7±2 设计原则，y 轴标签数量最多不超过这个范围。

4）y轴标签-取值范围

y 轴标签的取值应从基点（一般为 0）开始，以较为客观反映数据值。避免因展示截断数据导致用户做出错误的判断。

5）y轴标签-数据格式

标签保留的小数位数保持统一，不要因为某些轴标签是整数值，就略去小数点。

轴刻度

轴刻度是轴线上的小线段，可以清晰指代数值标签在坐标轴上的明确位置。轴刻度通常不显示，只有在肉眼无法定位到某个标签对应的数据点时，会显示刻度线，辅助用户定位，比如折线图，或抽样显示的柱状图。

轴刻度线有：置内、置中、置外三种形式，建议采用置外形式，将刻度置于坐标轴外侧。

轴线

轴线可根据实际需要考虑是否显示。如柱状图一般会隐藏 y 轴线和相应刻度，通过网格线来保留标签与数据值的对应关系。从而达到信息降噪，突出视觉重点的目的。

网格线

网格线主要用来辅助图表优化数据值与图形之间的映射关系等。当某些图表去除轴线时，可通过保留网格线的方式，延伸数值刻度至可视化对象中以便观察数据值的大小。

4. 提示信息

当鼠标悬停在图形上时，以悬浮层的形式展示该点的数据，比如该点的值、数据单位等，帮助用户快速获取图形的关键数据。

5. 时间轴

时间轴是辅助浏览数据的组件，它将大量数据浓缩在一个轴上，既可以缩小宏观看数据全貌，又可以放大微观看数据的片断，同时还可以拖拽观察数据在一定区间内的演变。

时间轴

时间轴的位置：时间轴可出现在图的四个方向，一般建议摆放在左、下、右方，上方因为有过多的图表组件（标题、图例、筛选器等）不建议摆放。

时间轴的位置

看到这里，相信你对数据图表的构成有了基础的了解，了解清楚每个“部件”的定义以及用法能够帮助我们更好地在工作中使用它，当然数据可视化的领域非常宽泛，保持对其它数据类产品的敏锐观察，构建自己的数据可视化思维，才能活学活用。希望今天的分享能够带给你一些不一样的收获。

互联网打工人

复制本文链接 文章为作者独立观点不代表优设网立场，未经允许不得转载。