xiaofeihe

G2学习总结1

介绍

G2是蚂蚁金服开源的可视化图表库AntV中的一员，用于点、线、面图形的可视化。

图表组成

每个图表主要包含坐标轴Axes、图例Legend、几何标记geom、提示信息tooltip、辅助标记guide几部分。
avatar

创建第一个图表

avatar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="chart1"></div>

const data = [
	{ genre: '数学', score: 88 },
	{ genre: '英语', score: 72 },
	{ genre: '语文', score: 92 },
	{ genre: '化学', score: 95 },
	{ genre: '历史', score: 89 }
];
// Step 1: 创建 Chart 对象
const chart = new G2.Chart({
	container: 'chart1',
	width : 600,
	height : 300
});
// Step 2: 载入数据源
chart.source(data);
// Step 3：创建图形语法，绘制柱状图，由 genre 和 score 两个属性决定图形位置
chart.interval().position('genre*score').color('genre');
// Step 4: 渲染图表
chart.render();

DataSet

DataSet是G2独立出来的数据处理模块，目标是为数据可视化场景提供状态驱动的、丰富而强大的数据处理能力。能为数据处理提供以下功能：
1.源数据的解析，将 CSV, DSV, GeoJSON 转成标准的JSON。
2.加工数据，包括 filter, map, fold(补数据) 等操作。
3.统计函数，汇总统计、百分比、封箱 等统计函数。
4.特殊数据处理，包括 地理数据、矩形树图、桑基图、文字云 的数据处理。
avatar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
以下实例使用DataSet筛选数据
<div id="chart1"></div>

const data = [
	{ genre: '数学', score: 88 },
	{ genre: '英语', score: 72 },
	{ genre: '语文', score: 92 },
	{ genre: '化学', score: 95 },
	{ genre: '历史', score: 89 }
];
// step1 创建 Chart 对象
const chart = new G2.Chart({
	container: 'chart1',
	width : 600,
	height : 300
});
// step2 创建 dataset 指定状态量
const ds = new DataSet({
	state: {
		score: '80'
	}
});
// step3 创建 DataView
const dv = ds.createView().source(data);
// step4 对数据进行处理
dv.transform({
	type: 'filter',
	callback(row) {
		return row.score >= ds.state.score;
	}
});
// step5 引用 DataView
chart.source(dv);
chart.interval().position('genre*score').color('genre');
chart.render();

Geom几何标记

G2生成的图表，并没有特定的图表类型，都是由几何标记决定的，G2支持的几何标记的类型如下：
avatar
对于定义完几何标记，即可设置图形属性，G2支持以下图形属性：
1.position：位置，二维坐标系内映射至 x 轴、y 轴。
2.color：颜色，包含了色调、饱和度和亮度。
3.size：大小，不同的几何标记对大小的定义有差异。
4.shape：形状，几何标记的形状决定了某个具体图表类型的表现形式，例如点图，可以使用圆点、三角形、图片表示；线图可以有折线、曲线、点线等表现形式。
5.opacity：透明度，图形的透明度，这个属性从某种意义上来说可以使用颜色代替，需要使用 ‘rgba’ 的形式，所以在 G2 中我们独立出来。
例如position、color属性：

1
chart.interval().position('genre*score').color('genre', [ '#1f77b4', '#ff7f0e', '#2ca02c']);

Coord坐标系

G2支持笛卡尔、极坐标两种坐标系。可通过chart.coord(‘coordType’, options)设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const data = [
	{ genre: '第一产业', score: 0.2 },
	{ genre: '第二产业', score: 0.3 },
	{ genre: '第三产业', score: 0.5 }
];
const chart = new G2.Chart({
	container: 'chart1',
	width : 600,
	height : 300
});
chart.source(data);
// 设置
chart.coord('polar');
chart.axis(false);
chart.interval().position('genre*score').color('genre');
chart.render();

avatar

图表事件

G2对各种事件提供了支持，以响应用户操作。

1
2
chart.on('eventType', () => {}); // 绑定事件
chart.off('eventType', () => {}); // 移除事件

avatar
例如：

1
2
3
chart.on('plotclick', ev => {
	console.log('点击了绘图区域');
});

自定义Shape

为了满足更多可视化的需求，G2也提供了自定义shape的功能。

1
2
3
4
5
6
7
8
9
const Shape = G2.Shape;
Shape.registerShape(
  geomName,					// 几何标记名
  shapeName, 				// 注册的具体图形名
  {
  	getPoints(cfg) {},      // 自定义具体标记点
  	draw(cfg, container) {} // 自定义最终绘制
  }
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
const Shape = G2.Shape;
Shape.registerShape('interval', 'triangle', {
	getPoints(cfg) {
		const x = cfg.x;
		const y = cfg.y;
		const y0 = cfg.y0;
		const width = cfg.size;
		return [
			{ x: x, y: y0 },
			{ x: x - width / 2, y: y },
			{ x: x + width / 2, y: y },
		]
	},
	draw(cfg, group) { // 自定义最终绘制
		const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
		const polygon = group.addShape('polygon', {
			attrs: {
				points: [
					[ points[0].x, points[0].y ],
					[ points[1].x, points[1].y ],
					[ points[2].x, points[2].y ]
				],
				fill: cfg.color
			}
		});
		return polygon; // !必须返回 shape
	}
});

const data = [
	{ genre: '数学', score: 88 },
	{ genre: '英语', score: 72 },
	{ genre: '语文', score: 92 },
	{ genre: '化学', score: 95 },
	{ genre: '历史', score: 89 }
];

const chart = new G2.Chart({
	container: 'chart1',
	width: 600,
	height: 400
});

chart.source(data);
chart.interval().position('genre*score').color('genre').shape('triangle');
chart.render();

avatar

如果对你有帮助，可以请我喝杯咖啡

avatar