如何装载数据

chart 对象支持两种数据载入的方式:

  • 方式 1:data 属性传入
  1. var chart = new G2.Chart({
  2. id: 'c1',
  3. width: 600,
  4. height: 300,
  5. data: [
  6. {x: 'a', y: 1},
  7. {x: 'b', y: 2},
  8. ...
  9. ]
  10. });
  • 方式 2:调用 chart.source(data) 方法

支持的数据格式

G2 支持两种格式的数据源:

  • JSON 数组
  • Frame 对象如果数据源是 JSON 数组,G2 在内部会将其转换成一个 Frame 对象。

JSON 数组

G2 接收的数据格式非常简单:标准的 JSON 数组,其中每个数组元素是一个标准的 JSON 对象:

Example:

  1. var data = [
  2. {"gender":"男","count":40},
  3. {"gender":"女","count":30}
  4. ];

Frame 对象

G2 的图表设置数据源后,在内部都会把数据转换成 Frame 对象,我们称之为数据集合,其是 JSON 数组的每条记录进行列合并的结果。

Frame 对象的格式如下:

  1. {
  2. names: array, // 源数据中所有数据属性的集合。
  3. arr: array, // 一个二维数组,同 names 元素顺序对应,存储每个数据属性对应的数据值。
  4. data: array, // 存储原始 JSON 数组。
  5. }

Example:

如下 JSON 数组转换为 Frame 对象后,结构如下表格所示:

  1. var data = [
  2. {"gender":"男","count":40},
  3. {"gender":"女","count":30}
  4. ];
namesarrdata
["gender", "count"][["男", "女"], [40, 30]][{"gender":"男","count":40}, {"gender":"女","count":30}]