axChart可视化图表知识分享之图表基础

数据可视化的本质是将数据映射到图形，继上次总结数据基础知识后，本文梳理了图表基础知识，了解不同类型的数据适合怎样的图表。

如下图所示，常见的统计图表主要包含8个主要组成部分，axChart根据这些组成部分进行相应的配置项设置，如果熟悉各个组成部分，不仅在使用axChart时配置图表参数更容易，而且对从事可视化产品设计、自定义图表研发也有一些帮助。

Q1坐标系：一种2维定位系统（暂不论3d图表），描述了数据是如何映射到图形所在平面。

Q2坐标轴：一般包含2个坐标轴，表达坐标系中数据在方向上的映射关系。

Q3数据列图形：即具体所使用的点、线、面等几何图形，用其表示一个或多个数据列。

Q4图例：使用颜色、大小、形状区分不同的数据列，用于图表中数据的筛选。

Q5提示信息：指鼠标悬停在图表上的某点时，以提示框的形式展示该点的数据。

Q6标签文本：标签是对当前数据进行的内容标注，不同的图表类型标签有所不同，最常用的是文本数值。

Q7辅助元素：在图表上增加线条、区域带、文字描述等，用于在图表上标识额外注解。

Q8图表标题：一般包含主标题和副标题。

1 图表组成

1.1 坐标系

坐标系是数据的定位系统，描述了数据是如何映射到图表图形所在的平面的。常见的坐标系主要是直角坐标系和极坐标系(普通极坐标系、螺旋坐标系、角度极坐标系)。

1.2 坐标轴

轴的元素一般包括：轴标题、轴标签、轴线、轴刻度线和坐标网格线。

1.2.1 轴标题

用来描述当前轴标签数据的意义。为了提升axChart的灵活性，不支持对坐标轴标题的设置，可在Axure原型中插入文本元件直接输入标题。

1.2.2 轴标签

轴标签均会显示，且可响应式自动调整。使用axChart时不需进行轴标签设置（大部分情况），大部分统计图表基于antv开发，其在轴标签上有以下自动调整规则：

连续轴、时间轴：默认自动抽样+不旋转标签。

分类轴：默认自动旋转+自动省略部分标签文字。

因此，设置数据类型时，准确的设置数据类型，轴标签将可能显示得更加合理。

1.2.3 轴线

界定图表绘图区的线条，用做度量的参照框架。AxChart自动根据不同类型图表设置轴线是否显示，一般不需要自行配置轴线。

1.2.4 轴刻度线

轴线上的小线段，是数值标签在坐标轴上的明确位置，其还可包含子刻度线。axChart会自动确定如何显示轴刻度线，不需要自行设置。

1.2.5 网格线

坐标轴上刻度线的延伸，添加到图表中易于查看和计算数据的线条。axChart自动根据不同类型图表设置网格线的显示方式，一般不需要用户设置网格线。

1.3 数据列图形

反应一组或多组数据列的图形表现形式，即所说的点、线、面等图形。其直接反映了图表的类型，如散点图、折线图、柱状图、面积图等，也可以是多种图形的混合图表。使用axChart时，选择何种图表，即表示使用对应的数据列图形，用户不必关心图形的选择。

1.4 图例

图例是图表的辅助元素，用不同形状、颜色或文字标示不同数据列，通过点击图例可以显示或隐藏该数据列，图例的元素一般由图形+文本组成。

axChart会根据设置的数据列图形属性以及数据类型自动生成不同的图例，并根据状态不同，图例自动设置为静态或可交互态。根据信息获取的效率和体验，每一个图表的图例都有默认的位置，但在使用时，用户可以手工设置axChart图表元件的图例展示位置（支持12个方位：上左、上中、上右、下左、下中、下右、左上、左中、左下、右上、右中、右下）。

1.5 提示信息

提示信息指当鼠标悬停在数据列图形上时，以提示框的形式提示该点的数据，比如该点的值、数据单位等。默认的提示信息，一般包含了视觉标记图形、文本标签和数值。

提示框的信息可以通过格式化函数自定义，axChart为方便产品经理使用，针对每种图表，已选择最恰当的提示方式，因此不支持自行设置提示信息配置。但可以配置是否展示提示框，如果设置为false则鼠标移上去也不再显示提示信息。

1.6 标签文本

在图表中，标签是对当前的一组数据进行的内容标注，包括数据点、拉线、文本数值等元素。

标签使用时，显示位置会影响标签的可阅读性，通常标签显示在图形外部，但在堆叠类图表，标签会显示在图形内。在使用axChart时，大部分图形的标签位置会自动选择显示的位置，但小部分图可以通过配置，指定显示的位置（内、外）。

1.7 辅助元素

在实际数据分析时，可以为图表添加辅助元素，进行标记注解。其完全是个性化、场景化的需求。因此，axChart图表元件并不支持辅助元素的添加。

以antv G2为例，常用做辅助设计的形式如下：

（1）辅助线（可带文本）：例如表示平均值或者预期分布的直线；

（2）辅助图片：在图表上添加辅助图片；

（3）辅助文本：指定位置添加文本说明；

（4）辅助框：框选一段图区，设置背景、边框等；

（5）区域着色：将图表中位于矩形选区中的图形元素提取出来，重新着色；

（6）html：辅助 html，指定位置添加自定义 html，显示自定义信息；

（7）辅助弧线：表示预计分布的曲线；

（8）特殊数据点标注：多用于折线图和面积图；

（9）特殊数据区间标注：多用于折线图和面积图。

但是，为图表添加辅助元素，可以使得图表与分析结果结合得更加紧密，因此，如果需要在原型中添加辅助元素，需有一定编码基础，可直接编写图表代码（推荐去antv或echart官网示例上修改），然后复制到axChart的code元件中，就能显示到原型中。

1.8 图表标题

图表标题默认显示在图表的顶部，一般包含主标题和副标题。由于相对静态，axChart都不支持设置图表标题，使用时，可直接在原型上使用文本元件输入任意标题，更加便捷、更加灵活。

2 数据映射

我们也可以了解一些数据映射的逻辑，加深对数据空间到图形空间的转化方式的理解，更详细的设计原理可以参看：https://g2.antv.vision/zh/docs/manual/tutorial/scale。

2.1 数据归一处理

表示将原始数据转化为[0,1]区间的转化，从而进行图形化表现，在antv中称之为“度量Scale”。不同的数据类型对应不同的转化方式，比如：

（1）连续型数据，如有一组0，1，2，4，7，10的数据，原始数据范围是[0,10]，归一处理为[0,1]范围的数据，变为0，0.1，0.2，0.4，0.7，1。

（2）分类数据，如[男，女]转为为0，1两个数值。

通过归一化处理后，核心的作用是：方便将数据映射到位置、颜色、大小等图形属性上。比如在200px*200px的坐标轴上，[10,20,50,80]归一化为[0.1,0.2,0.5,0.8]后，与200px的乘积就是其对应的坐标的实际位置。

2.2 归一处理的类型

如果有一组数据为[10,1000,100000,10000000]进行归一处理后，其在坐标系的位置可能导致较小的数据无法观察到其所在位置（接近于0），因此简单的按照等比例归一到[0,1]在实际图表中不一定恰当。因此，antv在归一处理上，支持多种归一处理方式。

axChart元件中，如果不设置数据的归一处理方式：如果是数字，默认为linear处理；如果是字符且是时间格式，则默认是time处理；如果是字符且不是时间格式则为cat处理。axChart从v1.0.7开始支持指定数据列归一处理的类型配置。

2.2.1 linear处理

表示连续线性地归一处理，如[1,2,3,6,9,10]处理为[0.1,0.2,0.3,0.6,0.9,1]。

除此之外，还需要关注数据列的范围，使得图表表现更加合理。比如，小红考试70分、小蓝考试90分，归一处理后为[0.7,0.9]，图表默认显示0.7-0.9的位置，然后我们知道一般分数是0-100分，因此可以设置数据列的最小值是0、最大值是100，这样图表显示的位置更加合理。又如，11日温度是10℃、12日温度是16℃，我们可根据当地历年温度设置恰当的最小值和最大值（而非0和100）。如果不设置最小值和最大值，图表也能正常映射，只是起始范围可能与实际生活认知略有不同。由于数值范围根据业务差异较大，因此axChart不支持数值范围设置，会自动取数值范围。

2.2.2 log处理

连续非线性的log归一处理，如[1,10,100,1000]处理为[0,1,2,3]，从而实现将非常大范围的数据映射到一个均匀的范围，图表识别体验更好。

2.2.3 pow处理

连续非线性的pow归一处理，如[2,4,8,16,32]处理为[1,2,3,4,5]，从而实现较大范围的数据映射到一个均为的范围。

2.2.4 time处理

连续的时间类型，是一种特殊的连续型数据。axChart会自动识别时间戳(143283992200)和时间字符串(2015-03-01、2015/03/01、2015-03-01 12:01:01、2015-03-01T12:00:00.000Z)并按照时间进行排序。

2.2.5 cat处理

分类数据处理，如[好，中，差]处理为[0.25,0.5,0.75]。

除此之外，antv可设置cat度量的values字段，一一对应分类数据的顺序，可以调整分类数据的显示顺序。axChart不支持分类数据的顺序设置，一般会根据原始数据中分类数据的顺序进行显示。

2.2.6 timeCat处理

有序的时间分类数据，如股票交易日期。如果股票交易日期按照time连续数据处理，由于节假日没有数据，会导致K线图断裂；因此按照timeCat有序分类数据处理，就会默认按照数据排序展示且没有断裂。

现实业务场景较为复杂，因此antv可以直接操作归一处理的方式（即操作度量）实现更加符合业务场景的需求。作为通用配置项，axChart从v1.0.8开始，支持对各个字段配置归一处理的类型，但是数值范围、分类数据顺序的配置不会支持，一定程度上可以满足原型设计的需求。

3 图表分类

根据图表的类型，我们将常用的可视化图表分为：统计图表、关系图、地图三大类，图表分类及axChart元件支持中继器参数配置情况如下：

除以上图表分类外，为方便axChart用于原型设计，还提供了antv/echarts源码运行元件、可视化背景组件等。

pmlab普通用户

收藏 海报分享