简介
在整体思路章节中我们讲解过可视化整体的数据流程和G2的数据流程，本章以最简单的点图和柱状图为示例展示每一步数据是如何转变的。
回顾G2的数据流程：
注意：
- 统计函数可以嵌入到语法中，所以也需要解释统计函数如何影响数据变化
数据流示例
我们以最简单的月份、天气、城市的数据为例解释数据如何发生数据图形映射，如何绘制的。
假设 500*500的图表绘制区域
原始数据
| month | temp | city | year |
|---|
| 1月 |
5 |
北京 |
2001 |
| 2月 |
10 |
北京 |
2001 |
| 1月 |
8 |
南京 |
2003 |
| 2月 |
14 |
南京 |
2004 |
点图示例
设置数据源
chart.source(data);
设置语法
chart.point().position('month*temp').color('city',['red','blue'])
- 将month映射到position的水平（x轴）方向
- 将temp映射到position的垂直（y轴）方向
- 将city映射到color
过滤数据列
创建图表需要的数据，仅保留参与图形语法的字段
| month | temp | city |
|---|
| 1月 |
5 |
北京 |
| 2月 |
10 |
北京 |
| 1月 |
8 |
南京 |
| 2月 |
14 |
南京 |
统计函数执行
无统计函数，所以不执行统计函数
保存原始数据
此时将原始数据保存下来，方便后期tooltip取对应的数据
| month | temp | city | origin |
|---|
| 1月 |
5 |
北京 |
{month: '1月',temp: 5,city: '北京'} |
| 2月 |
10 |
北京 |
{...} |
| month | temp | city | origin |
|---|
| 1月 |
8 |
南京 |
{month: '1月',temp: 8,city: '南京'} |
| 2月 |
14 |
南京 |
{...} |
转换成数字
分类类型month,city都转换成数字
| month | temp | city | origin |
|---|
| 0 |
5 |
0 |
{month: '1月',temp: 5,city: '北京'} |
| 1 |
10 |
0 |
{...} |
| month | temp | city | origin |
|---|
| 0 |
8 |
1 |
{month: '1月',temp: 8,city: '南京'} |
| 1 |
14 |
1 |
{...} |
调整数据
无调整
数据归一化
- 由于月份Month是分类类型，又决定x轴的位置，由于分类类型，需要在坐标轴2端留下空白，所以数据归一化后的分布范围是[0.25-0.75]
- city是分类类型，但是不参与位置运算，所以分布范围是[0-1]
- temp是数字类型，为了让用户易于理解，坐标轴上的点是： [0,5,10,15,20],Min: 0,max: 20
| month | temp | city | origin |
|---|
| 0.25 |
0.25 |
0 |
{month: '1月',temp: 5,city: '北京'} |
| 0.75 |
0.5 |
0 |
{...} |
| month | temp | city | origin |
|---|
| 0.25 |
0.4 |
1 |
{month: '1月',temp: 8,city: '南京'} |
| 0.75 |
0.7 |
1 |
{...} |
计算图形生成需要的点
| month | temp | city | origin |
|---|
| [0.25] |
[0.25] |
0 |
{month: '1月',temp: 5,city: '北京'} |
| [0.75] |
[0.5] |
0 |
{...} |
| month | temp | city | origin |
|---|
| [0.25] |
[0.4] |
1 |
{month: '1月',temp: 8,city: '南京'} |
| [0.75] |
[0.7] |
1 |
{...} |
图形属性映射
由于y轴的方向是从下往上，所以 0.1 转换成画布坐标是 500 - 500 * 0.1
| x | y | color | origin |
|---|
| [125] |
[375] |
red |
{month: '1月',temp: 5,city: '北京'} |
| [375] |
[250] |
red |
{...} |
| x | y | color | origin |
|---|
| [125] |
[300] |
blue |
{month: '1月',temp: 8,city: '南京'} |
| [375] |
[150] |
blue |
{...} |
最后结果：
柱状图示例
interval 最简单的数据转化过程
语法
chart.interval().position('month*temp').color('city',['red','blue'])
创建图表需要的数据
仅保留参与图形语法的字段
| month | temp | city |
|---|
| 1月 |
5 |
北京 |
| 2月 |
10 |
北京 |
| 1月 |
8 |
南京 |
| 2月 |
14 |
南京 |
对数据分组
由于color属性对应的字段city是分类类型，所以对数据进行分组
| month | temp | city |
|---|
| 1月 |
5 |
北京 |
| 2月 |
10 |
北京 |
| month | temp | city |
|---|
| 1月 |
8 |
南京 |
| 2月 |
14 |
南京 |
统计函数执行
无统计函数，所以不执行统计函数
保存原始数据
| month | temp | city | origin |
|---|
| 1月 |
5 |
北京 |
{month: '1月',temp: 5,city: '北京'} |
| 2月 |
10 |
北京 |
{...} |
| month | temp | city | origin |
|---|
| 1月 |
8 |
南京 |
{month: '1月',temp: 8,city: '南京'} |
| 2月 |
14 |
南京 |
{...} |
转换成数字
分类类型month,city都转换成数字
| month | temp | city | origin |
|---|
| 0 |
5 |
0 |
{month: '1月',temp: 5,city: '北京'} |
| 1 |
10 |
0 |
{...} |
| month | temp | city | origin |
|---|
| 0 |
8 |
1 |
{month: '1月',temp: 8,city: '南京'} |
| 1 |
14 |
1 |
{...} |
调整数据
无调整
数据归一化
- 由于月份Month是分类类型，又决定x轴的位置，由于分类类型，需要在坐标轴2端留下空白，所以数据归一化后的分布范围是[0.25-0.75]
- city是分类类型，但是不参与位置运算，所以分布范围是[0-1]
- temp是数字类型，为了让用户易于理解，坐标轴上的点是： [0,5,10,15,20],Min: 0,max: 20
| month | temp | city | origin |
|---|
| 0.25 |
0.25 |
0 |
{month: '1月',temp: 5,city: '北京'} |
| 0.75 |
0.5 |
0 |
{...} |
| month | temp | city | origin |
|---|
| 0.25 |
0.4 |
1 |
{month: '1月',temp: 8,city: '南京'} |
| 0.75 |
0.7 |
1 |
{...} |
计算图形生成需要的点
- 由于区域图需要跟x轴形成闭合的区间,又是一个矩形，所以每个点会生成4个点
- 柱状图的宽度，如果未指定size,则需要计算默认矩形的宽度，在这个示例，宽度 = 1/2/2 = 0.25,那么柱状图的x轴需要生成 x - 0.25/2 和 x + 0.25/2的2个点
- 最终生成的图形是：
4-3
| |
1-2
| month | temp | city | origin |
|---|
| [0.125,0.375,0.125,0.375] |
[0,0,0.25,0.25] |
0 |
{month: '1月',temp: 5,city: '北京'} |
| [0.625,0.875,0.75,0.875] |
[0,0,0.5,0.5] |
0 |
{...} |
| month | temp | city | origin |
|---|
| [0.125,0.375,0.125,0.375] |
[0,0,0.4,0.4] |
1 |
{month: '1月',temp: 8,city: '南京'} |
| [0.625,0.875,0.75,0.875] |
[0,0,0.7,0.7] |
1 |
{...} |
图形属性映射
由于y轴的方向是从下往上，所以 0.1 转换成画布坐标是 500 - 500 * 0.1
| x | y | color | origin |
|---|
| [62.5,187.5,62.5,187.5] |
[500,500,375,375] |
red |
{month: '1月',temp: 5,city: '北京'} |
| [375,375] |
[500,500,250,250] |
red |
{...} |
| x | y | color | origin |
|---|
| [62.5,187.5,62.5,187.5] |
[500,500,300,300] |
blue |
{month: '1月',temp: 8,city: '南京'} |
| [312.5,437.5,312.5,437.5] |
[500,500,150,150] |
blue |
{...} |
执行结果
- 此时不同城市相同月份的柱状图被遮挡了，所以仅显示了2条数据，可以通过层叠或者分组调整数据
柱状图层叠
语法
chart.intervalStack().position('month*temp').color('city',['red','blue'])
创建图表需要的数据
仅保留参与图形语法的字段
| month | temp | city |
|---|
| 1月 |
5 |
北京 |
| 2月 |
10 |
北京 |
| 1月 |
8 |
南京 |
| 2月 |
14 |
南京 |
对数据分组
由于color属性对应的字段city是分类类型，所以对数据进行分组
| month | temp | city |
|---|
| 1月 |
5 |
北京 |
| 2月 |
10 |
北京 |
| month | temp | city |
|---|
| 1月 |
8 |
南京 |
| 2月 |
14 |
南京 |
统计函数执行
无统计函数，所以不执行统计函数
保存原始数据
| month | temp | city | origin |
|---|
| 1月 |
5 |
北京 |
{month: '1月',temp: 5,city: '北京'} |
| 2月 |
10 |
北京 |
{...} |
| month | temp | city | origin |
|---|
| 1月 |
8 |
南京 |
{month: '1月',temp: 8,city: '南京'} |
| 2月 |
14 |
南京 |
{...} |
转换成数字
分类类型month,city都转换成数字
| month | temp | city | origin |
|---|
| 0 |
5 |
0 |
{month: '1月',temp: 5,city: '北京'} |
| 1 |
10 |
0 |
{...} |
| month | temp | city | origin |
|---|
| 0 |
8 |
1 |
{month: '1月',temp: 8,city: '南京'} |
| 1 |
14 |
1 |
{...} |
调整数据
因为interval存在 stack，所以需要对temp的数据进行层叠调整
| month | temp | city | origin |
|---|
| 0 |
[0,5] |
0 |
{month: '1月',temp: 5,city: '北京'} |
| 1 |
[0,10] |
0 |
{...} |
| month | temp | city | origin |
|---|
| 0 |
[5,13] |
1 |
{month: '1月',temp: 8,city: '南京'} |
| 1 |
[10,24] |
1 |
{...} |
数据归一化
- 由于月份Month是分类类型，又决定x轴的位置，由于分类类型，需要在坐标轴2端留下空白，所以数据归一化后的分布范围是[0.25-0.75]
- city是分类类型，但是不参与位置运算，所以分布范围是[0-1]
- temp是数字类型，为了让用户易于理解,同时数据进行层叠处理后，坐标轴上的点是： [0,5,10,15,20,25],Min: 0,max: 25
| month | temp | city | origin |
|---|
| 0.25 |
[0,0.2] |
0 |
{month: '1月',temp: 5,city: '北京'} |
| 0.75 |
[0,0.4] |
0 |
{...} |
| month | temp | city | origin |
|---|
| 0.25 |
[0.2,0.52] |
1 |
{month: '1月',temp: 8,city: '南京'} |
| 0.75 |
[0.4,24/25] |
1 |
{...} |
计算图形生成需要的点
- 由于区域图需要跟x轴形成闭合的区间,又是一个矩形，所以每个点会生成4个点
- 柱状图的宽度，如果未指定size,则需要计算默认矩形的宽度，在这个示例，宽度 = 1/2/2 = 0.25,那么柱状图的x轴需要生成 x - 0.25/2 和 x + 0.25/2的2个点
- 最终生成的图形是：
4-3
| |
1-2
| month | temp | city | origin |
|---|
| [0.125,0.375,0.125,0.375] |
[0,0,0.2,0.2] |
0 |
{month: '1月',temp: 5,city: '北京'} |
| [0.625,0.875,0.75,0.875] |
[0,0,0.4,0.4] |
0 |
{...} |
| month | temp | city | origin |
|---|
| [0.125,0.375,0.125,0.375] |
[0.2,0.2,0.52,0.52] |
1 |
{month: '1月',temp: 8,city: '南京'} |
| [0.625,0.875,0.75,0.875] |
[0.4,0.4,24/25,24/25] |
1 |
{...} |
图形属性映射
由于y轴的方向是从下往上，所以 0.1 转换成画布坐标是 500 - 500 * 0.1
| x | y | color | origin |
|---|
| [62.5,187.5,62.5,187.5] |
[500,500,400,400] |
red |
{month: '1月',temp: 5,city: '北京'} |
| [375,375] |
[500,500,300,300] |
red |
{...} |
| x | y | color | origin |
|---|
| [62.5,187.5,62.5,187.5] |
[400,400,260,260] |
blue |
{month: '1月',temp: 8,city: '南京'} |
| [312.5,437.5,312.5,437.5] |
[300,300,20,20] |
blue |
{...} |
结果
柱状图的分组
语法
chart.interval().position('month*temp').color('city',['red','blue'])
创建图表需要的数据
仅保留参与图形语法的字段
| month | temp | city |
|---|
| 1月 |
5 |
北京 |
| 2月 |
10 |
北京 |
| 1月 |
8 |
南京 |
| 2月 |
14 |
南京 |
对数据分组
由于color属性对应的字段city是分类类型，所以对数据进行分组
| month | temp | city |
|---|
| 1月 |
5 |
北京 |
| 2月 |
10 |
北京 |
| month | temp | city |
|---|
| 1月 |
8 |
南京 |
| 2月 |
14 |
南京 |
统计函数执行
无统计函数，所以不执行统计函数
保存原始数据
| month | temp | city | origin |
|---|
| 1月 |
5 |
北京 |
{month: '1月',temp: 5,city: '北京'} |
| 2月 |
10 |
北京 |
{...} |
| month | temp | city | origin |
|---|
| 1月 |
8 |
南京 |
{month: '1月',temp: 8,city: '南京'} |
| 2月 |
14 |
南京 |
{...} |
转换成数字
分类类型month,city都转换成数字
| month | temp | city | origin |
|---|
| 0 |
5 |
0 |
{month: '1月',temp: 5,city: '北京'} |
| 1 |
10 |
0 |
{...} |
| month | temp | city | origin |
|---|
| 0 |
8 |
1 |
{month: '1月',temp: 8,city: '南京'} |
| 1 |
14 |
1 |
{...} |
调整数据
无调整
数据归一化
- 由于月份Month是分类类型，又决定x轴的位置，由于分类类型，需要在坐标轴2端留下空白，所以数据归一化后的分布范围是[0.25-0.75]
- city是分类类型，但是不参与位置运算，所以分布范围是[0-1]
- temp是数字类型，为了让用户易于理解，坐标轴上的点是： [0,5,10,15,20],Min: 0,max: 20
| month | temp | city | origin |
|---|
| 0.25 |
0.25 |
0 |
{month: '1月',temp: 5,city: '北京'} |
| 0.75 |
0.5 |
0 |
{...} |
| month | temp | city | origin |
|---|
| 0.25 |
0.4 |
1 |
{month: '1月',temp: 8,city: '南京'} |
| 0.75 |
0.7 |
1 |
{...} |
计算图形生成需要的点
- 由于区域图需要跟x轴形成闭合的区间,又是一个矩形，所以每个点会生成4个点
- 柱状图的宽度，如果未指定size,则需要计算默认矩形的宽度，在这个示例，宽度 = 1/2/2 = 0.25,那么柱状图的x轴需要生成 x - 0.25/2 和 x + 0.25/2的2个点
- 最终生成的图形是：
4-3
| |
1-2
| month | temp | city | origin |
|---|
| [0.125,0.375,0.125,0.375] |
[0,0,0.25,0.25] |
0 |
{month: '1月',temp: 5,city: '北京'} |
| [0.625,0.875,0.75,0.875] |
[0,0,0.5,0.5] |
0 |
{...} |
| month | temp | city | origin |
|---|
| [0.125,0.375,0.125,0.375] |
[0,0,0.4,0.4] |
1 |
{month: '1月',temp: 8,city: '南京'} |
| [0.625,0.875,0.75,0.875] |
[0,0,0.7,0.7] |
1 |
{...} |
图形属性映射
由于y轴的方向是从下往上，所以 0.1 转换成画布坐标是 500 - 500 * 0.1
| x | y | color | origin |
|---|
| [62.5,187.5,62.5,187.5] |
[500,500,375,375] |
red |
{month: '1月',temp: 5,city: '北京'} |
| [375,375] |
[500,500,250,250] |
red |
{...} |
| x | y | color | origin |
|---|
| [62.5,187.5,62.5,187.5] |
[500,500,300,300] |
blue |
{month: '1月',temp: 8,city: '南京'} |
| [312.5,437.5,312.5,437.5] |
[500,500,150,150] |
blue |
{...} |
执行结果
更多
本章仅仅以点图和柱状图为例介绍了G2在处理数据视觉通道映射的过程中的数据流程，不同的图表的差异主要在于图形生成需要的点，更多的详细信息查看各个图表类型所在的章节。下一章我们开始进入图形类型的介绍
G2: https://g2.alipay.com
