AntV - G2 使用笔记

写在前面

G2 是一套简洁的渐进式可视化语法，用于报表搭建、数据探索以及可视化叙事。

G2 的概念和相关参数很多，虽然功能强大且灵活多样化，但学习曲线相对陡峭。如需要快速实现界面展示，推荐使用 G2Plot - 开箱即用的图表库。

G2 官网地址是 https://g2.antv.antgroup.com，它的文档分成了【文档】、【选项】、【API】、【图标示例】等几个部分：

【文档】是对 G2 组件本身及其核心概念（组成部分）的介绍，每个概念都有相关例子作说明，但相关参数的说明需另行查询【选项】；
【选项】是对各个组成部分的使用参数的文字说明，但对应例子较少，一般需通过【图标示例】作更深入的理解；
【API】是函数式字典，列明每个组成部分的 API 函数式（为了提供更多样化和灵活地声明图表的能力，G2 提供了一系列函数式 API 来声明图表，与使用选项没有本质区别）与选项的对应关系；
【图标示例】列举了很多不同选项及选项组合的使用样例，让文档的其它部分内容更好理解。

快速入门

G2 的使用一般来说是三部曲：

数据读取 - 通过直接赋值、读取 JSON 或 CSV 等方式取得数据；
数据映射 - 创建标记（基本视觉组成单元），并将数据的各部分按不同规则映射到标记接口（通道）上，基本整个 G2 的使用都是围绕这部分进行；
数据渲染 - 执行 Chart 实例（此概念下文有说明）的 render 方法显示结果。

重要核心概念

为了便于学习如何使用 G2，实现数据映射，需要首先了解一些重要的核心概念：

核心概念	说明
Chart	G2 的大部分能力通过 `Chart` 对象暴露给用户，每个 G2 的可视化都是通过实例化 `Chart` 对象创建一个新的图表实例。参考官网文档：https://g2.antv.antgroup.com/manual/core/chart
Data	G2 中的数据 `Data` 主要用于指定需要可视化的数据和数据转换（预处理）。数据可以指定在 View 层级，也可以指定在 Mark 层级。指定为 `Data` 的数据需满足 3 个条件：内联数据、纯数组、没有预处理函数。参考官网文档：https://g2.antv.antgroup.com/manual/core/data
View	G2 中视图 `View` 用来绘制多个标记。一个视图至少拥有一个坐标系，也是应用交互的最小单位。实例化 `Chart` 返回的实质上就是一个 `View` 对象。参考官网文档：https://g2.antv.antgroup.com/manual/core/view
Mark	G2 中把标记 Mark 作为基本的视觉组成单元，任何一个图表都是多个标记组合而成的。不同类型的图表由不同的 Mark 对象实现，如折线图 `view.line`、柱状图 `view.interval` 等等。参考官网文档：https://g2.antv.antgroup.com/manual/core/mark
Encode	G2 中编码（Encode）主要用于指定视觉元素属性和数据之间的关系。可以在 Mark 层级指定编码，也可以在 View 层级指定编码。参考官网文档：https://g2.antv.antgroup.com/manual/core/encode
Transform	G2 中的标记转换（Mark Transform）提供了一个方便的机制，去转换数据和标记的选项，主要用于分析数据。标记转换的本质是一个函数，这个函数会筛选、修改、聚合和产生新的通道值。转换是一个数组，声明多个转换时会按顺序执行。转换可以配置在 Mark 层级，也可以配置在 View 层级。参考官网文档：https://g2.antv.antgroup.com/manual/core/transform

数据映射

理解上述的核心概念后可以发现，G2 就是通过 Encode 和 Transform 将 Data 映射到 Mark 上，再由 View 渲染出结果的。

Encode 的使用有两种方式，一是直接指定数据与通道的映射关系，二是定义一个函数来指明数据到通道的变换方式。为了便于理解，下边举一个例子在 Mark 层级指定编码：

const chart = new G2.Chart();

chart.data({
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json'
});

chart.point()
    .encode('x', 'weight') // 方式一，直接指定数据与通道的映射关系
    .encode('y', (d) => d.height) // 方式二，定义一个函数来指明数据到通道的变换方式
    .encode('color', 'gender');

chart.render();

Transform 的类型比较丰富，罗列如下：

方法	说明	参数	参数说明
bin	对连续的 x 和连续的 y 通道进行分箱，并且对通道根据指定的 reducer 进行聚合。	thresholdsX	number 对 x 分箱的数量
		thresholdsY	number 对 y 分箱的数量
		[channel]	string \| (I: number[], V: Primitive[]) => Primitive 字符串返回值可选项为 mean、max、count、min、median、sum、first、last
binX	对 x 通道进行分箱，如果希望对 y 通道进行分箱，使用 binX + transpose 坐标系。	thresholds	number 对 x 分箱的数量
binX	对 x 通道进行分箱，如果希望对 y 通道进行分箱，使用 binX + transpose 坐标系。	[channel]	string \| (I: number[], V: Primitive[]) => Primitive 字符串返回值可选项为 mean、max、count、min、median、sum、first、last
diffY	对 y 和 y1 通道求差集。	groupBy	string \| string[] 按照哪个通道分组数据，默认为 x
diffY	对 y 和 y1 通道求差集。	series	bool 是否存在分组，默认为 true
dodgeX	生成 series 通道值为 color 通道的值，根据 series 通道实现分组效果。	groupBy	string \| string[] 按照哪个通道分组数据，默认为 x
		reverse	bool 是否逆序，默认为 false
		orderBy	(data: Record<string, Primitive>) => Primitive 默认返回 null
		padding	number 分组数据之间的间距（0 ~ 1），默认为 0
flexX	根据指定通道设置 x 比例尺的 flex 属性，实现不等宽矩形的效果。	field	string \| (d: any) => Primitive[] 指定生成权重数组的字段，优先级比 channel 高
		channel	string 指定生成权重数组的通道，默认为 y
		reducer	'sum' \| (I: number[], V: Primitive[]) => Primitive 默认为 sum
group	对离散的 x 和连续的 y 通道进行分组，并且对通道根据指定的 Reducer 进行聚合。	channels	string \| string[] 针对哪些通道做数据分组聚合，默认为 ['x', 'y']
group	对离散的 x 和连续的 y 通道进行分组，并且对通道根据指定的 Reducer 进行聚合。	[channel]	string \| (I: number[], V: Primitive[]) => Primitive 字符串返回值可选项为 mean、max、count、min、median、sum、first、last
groupColor	对离散的 color 通道进行分组，并且对通道根据指定的 Reducer 进行聚合。	[channel]	string \| (I: number[], V: Primitive[]) => Primitive 字符串返回值可选项为 mean、max、count、min、median、sum、first、last
groupX	对离散的 x 通道进行分组，并且对通道根据指定的 Reducer 进行聚合。等效于 channels = ['x'] 的 group。	[channel]	string \| (I: number[], V: Primitive[]) => Primitive 字符串返回值可选项为 mean、max、count、min、median、sum、first、last
groupY	对离散的 y 通道进行分组，并且对通道根据指定的 Reducer 进行聚合。等效于 channels = ['y'] 的 group。	[channel]	string \| (I: number[], V: Primitive[]) => Primitive 字符串返回值可选项为 mean、max、count、min、median、sum、first、last
jitter	根据离散的 x 和离散的 y 比例尺，生成 dy 和 dx 通道，实现在某个区域散开的效果。	padding	number 分组在 x,y 方向上的间距 [0 ~ 1]，默认为 0
		paddingX	number 分组在 x 方向上的间距 [0 ~ 1]，默认为 0
		paddingY	number 分组在 y 方向上的间距 [0 ~ 1]，默认为 0
		random	() => number 随机函数，返回值为 [0, 1)，默认 Math.random
jitterX	根据离散的 x 比例尺，生成 dx 通道，实现在某个区域的 x 方向散开的效果。	paddingX	number 分组在 x 方向上的间距 [0 ~ 1]，默认为 0
jitterX	根据离散的 x 比例尺，生成 dx 通道，实现在某个区域的 x 方向散开的效果。	random	() => number 随机函数，返回值为 [0, 1)，默认 Math.random
jitterY	根据离散的 y 比例尺，生成 dy 通道，实现在某个区域的 y 方向散开的效果。	paddingY	number 分组在 y 方向上的间距 [0 ~ 1]，默认为 0
jitterY	根据离散的 y 比例尺，生成 dy 通道，实现在某个区域的 y 方向散开的效果。	random	() => number 随机函数，返回值为 [0, 1)，默认 Math.random
normalizeY	对 y 和 y1 通道根据指定的 basis 进行归一化处理。	groupBy	string \| string[]按照哪个通道分组数据，默认为 x
normalizeY	对 y 和 y1 通道根据指定的 basis 进行归一化处理。	basis	string \| (I, Y) => number 使用某一个聚合数据进行归一化计算，字符串可选值为 deviation、first、last、max、mean、median、min、sum，默认为 max
pack	让元素在空间中紧凑排列，常常有用于单元可视化。	padding	number 每个元素之间的间距，单位为 px，默认为 0
pack	让元素在空间中紧凑排列，常常有用于单元可视化。	direction	string 元素的堆叠方向，可选项为 row、col，默认为 col
sample	针对线、柱、条、散点类图表，当数据量远大于屏幕像素的时候，开启一些内置的采样策略，可以有效的优化图表的绘制效率，默认关闭，也就是按照原始数据全部渲染。	groupBy	string \| string[] 数据分组的字段，默认值 series
		thresholds	number 采样策略启用的数据量阈值，默认值 2000
		strategy	string \| (I: number[], X: number[], Y: number[], thresholds: number) => number[] 采用指定的采样策略，字符串可选项为 lttb、median、max、min、first、last，默认为 median
select	按照指定通道进行分组，根据指定通道和 selector 从每组选择出数据。	groupBy	string \| string[] 针对指定的通道进行分组，默认值 series
		channel	string 针对每个分组，使用指定的通道进行指定的数据抽取
		selector	string \| (I: number[], V: number[]) => number[] 针对每个分组，指定对应的数据抽取操作。字符串可选项为 min、max、first、last、mean、median，默认值 first
selectX	按照指定通道进行分组，根据 x 通道和 selector 从每组选择出数据。	groupBy	string \| string[] 针对指定的通道进行分组，默认值 series
selectX	按照指定通道进行分组，根据 x 通道和 selector 从每组选择出数据。	selector	string \| (I: number[], V: number[]) => number[] 针对每个分组，指定对应的数据抽取操作。字符串可选项为 min、max、first、last、mean、median，默认值 first
selectY	按照指定通道进行分组，根据 y 通道和 selector 从每组选择出数据。	groupBy	string \| string[] 针对指定的通道进行分组，默认值 series
selectY	按照指定通道进行分组，根据 y 通道和 selector 从每组选择出数据。	selector	string \| (I: number[], V: number[]) => number[] 针对每个分组，指定对应的数据抽取操作。字符串可选项为 min、max、first、last、mean、median，默认值 first
sortColor	对离散的 color 比例尺的定义域根据指定通道排序。	reverse	boolean 是否逆序，默认值 false
		by	string 指定排序的通道，默认值 y
		slice	number \| [number, number] 选择一个分片范围，默认值 y
		reducer	string \| (I: number[], V: Primitive[]) => Primitive 分组聚合，用于比较大小。字符串返回值可选项为 max、min、sum、first、last、mean、median，默认值 max
sortX	对离散的 x 比例尺的定义域根据指定通道排序。	reverse	boolean 是否逆序，默认值 false
		by	string 指定排序的通道，默认值 y
		slice	number \| [number, number] 选择一个分片范围，默认值 y
		reducer	string \| (I: number[], V: Primitive[]) => Primitive 分组聚合，用于比较大小。字符串返回值可选项为 max、min、sum、first、last、mean、median，默认值 max
		ordinal	boolean reducer 处理逻辑，若被处理的数据是连续在设置为 false，默认为 true
sortY	对离散的 y 比例尺的定义域根据指定通道排序。	reverse	boolean 是否逆序，默认值 false
		by	string 指定排序的通道，默认值 y
		slice	number \| [number, number] 选择一个分片范围，默认值 y
		reducer	string \| (I: number[], V: Primitive[]) => Primitive 分组聚合，用于比较大小。字符串返回值可选项为 max、min、sum、first、last、mean、median，默认值 max
stackEnter	对 enterDuration 和 enterDelay 通道进行堆叠，实现分组动画的效果。	groupBy	string \| string[] 选择一个分组通道，默认为 x
		orderBy	string 排序的通道，默认为 null
		reverse	boolean 是否逆序，默认值 false
		duration	number 动画间隔，默认值 3000
		reducer	string \| (I: number[], V: Primitive[]) => Primitive 分组聚合，用于比较大小。字符串返回值可选项为 max、min、sum、first、last、mean、median，默认值 max
stackY	按照指定通道分组，对每组的 y 和 y1 通道进行堆叠，实现堆叠效果。	groupBy	string \| string[] 选择一个分组通道，默认为 x
		orderBy	string 排序的通道，默认为 null
		y	string y 通道选择的数据通道来源，默认值 y
		y1	string y1 通道选择的数据通道来源，默认值 y1
		reverse	boolean 是否逆序，默认值 false
		series	boolean 是否有分组字段，默认值 true
symmetryY	按照指定通道分组，给每组的 y 和 y1 通道添加偏移，实现对称效果。	groupBy	string \| string[] 选择一个分组通道，默认为 x

编辑于 2024-06-16。