G2 的数据处理流程

创建 Frame 对象对数据进行分组执行统计函数保存原始数据数据数值化调整数据 adjust归一化操作计算绘制图形需要的点映射至图形属性渲染绘制下面我们以最简单的月份、天气、城市的数据为例说明 G2 的数据处理流程，阐述数据是如何映射至图形空间。 我们需要在 400 px * 200 px 像素区域绘制如下点图（该图只是用于数据流说明，并不具有可视化意义）： image 原始数据如下：

  1. var data = [
  2.   {"month":"一月","temperature":5,"city":"北京"},
  3.   {"month":"二月","temperature":10,"city":"北京"},
  4.   {"month":"一月","temperature":8,"city":"南京"},
  5.   {"month":"二月","temperature":14,"city":"南京"},
  6. ];

绘图代码：

  1. var chart = new G2.Chart({
  2.   id: 'mountNode',
  3.   width: 400,
  4.   height: 200
  5. });
  6. chart.source(data);
  7. chart.point().position('month*temperature').color('city', ['red', 'blue']);
  8. chart.render();

chart.point().position(‘month*temperature’).color(‘city’); 含义如下：

将 month 映射到 position 位置图形属性的 x 轴方向；将 temperature 映射到 position 位置图形属性的 y 轴方向；将 city 映射到 color 颜色图形属性。 创建 Frame 对象结构如表所示： monthtemperaturecity一月5北京二月10北京一月8南京二月14南京

对数据进行分组默认我们会根据映射至 size shape color 这三个图形属性的数据属性对生成的 frame 进行分组。 这里我们根据 city 字段对数据进行分组，将 step 1 中创建的 frame 根据 city 的数值分组创建了两个新的 frame，结果如下表所示： monthtemperaturecity一月5北京二月10北京

monthtemperaturecity一月8南京二月14南京

执行统计函数语法中无统计，故此处不执行。 保存原始数据此时将原始数据保存下来，方便后期 tooltip 取对应的数据进行展示。 所有的原始数据存储于 _origin 属性中。 monthtemperaturecity_origin一月5北京{"month":"一月","temperature":5,"city":"北京"}二月10北京{"month":"二月","temperature":10,"city":"北京"}

monthtemperaturecity_origin一月8南京{"month":"一月","temperature":8,"city":"南京"}二月14南京{"month":"二月","temperature":14,"city":"南京"}

数据数值化这里 month city 为分类的类型，我们将其转换为数值（索引值）。 monthtemperaturecity_origin050{month: ‘一月’,temperature: 5,city: ‘北京’}1100{"month":"二月","temperature":10,"city":"北京"}

monthtemperaturecity_origin081{"month":"一月","temperature":8,"city":"南京"}1141{"month":"二月","temperature":14,"city":"南京"}

调整数据 adjust此处无调整。 归一化操作 由于月份 month 是分类类型，又决定 x 轴的位置，需要在坐标轴两端留下空白，所以需要将数据归一化的分布范围从 [0, 1] 调整至 [0.25, 0.75]；city 是分类类型，但是不参与位置运算，所以分布范围仍为 [0, 1]；temperature 是数字类型，原始数值范围为 [5, 14]，但是为了让 y 坐标轴的刻度线均匀分布易于用户阅读理解，G2 会默认对数值进行优化，将数值范围调整为 [0, 20] 使得刻度线均匀分布（默认每条坐标轴绘制 5 个刻度线），即 [0, 5, 10, 15, 20]; 归一化后的结果： monthtemperaturecity_origin0.250.250{month: ‘一月’,temperature: 5,city: ‘北京’}0.750.50{"month":"二月","temperature":10,"city":"北京"}

monthtemperaturecity_origin0.250.41{"month":"一月","temperature":8,"city":"南京"}0.750.71{"month":"二月","temperature":14,"city":"南京"}

计算绘制图形需要的点对于点图，我们只需要获取 x 和 y 轴的坐标点即可。所以数据处理结果如下： monthtemperaturecity_origin[0.25][0.25]0{month: ‘一月’,temperature: 5,city: ‘北京’}[0.75][0.5]0{"month":"二月","temperature":10,"city":"北京"}

monthtemperaturecity_origin[0.25][0.4]1{"month":"一月","temperature":8,"city":"南京"}[0.75][0.7]1{"month":"二月","temperature":14,"city":"南京"}

映射至图形属性由于画布坐标的起始点为左上角，所有 0.1 转换成画布坐标的结果为 200 - 200 * 0.1 xycolor_origin[100][150]’red’{month: ‘一月’,temperature: 5,city: ‘北京’}[300][100]’red’{"month":"二月","temperature":10,"city":"北京"}

xycolor_origin[100][120]’blue’{"month":"一月","temperature":8,"city":"南京"}[300][60]’blue’{"month":"二月","temperature":14,"city":"南京"}

渲染绘制将最后处理的数据交由绘图库进行绘制渲染。

  1.                     当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
  4.                         上一篇:
  7.                         下一篇:
  10.             <div class="