如何装载数据

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

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

支持的数据格式

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

  1. JSON 数组
  2. Frame 对象

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

JSON 数组

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

Example:

var data = [
  {"gender":"男","count":40},
  {"gender":"女","count":30}
];

Frame 对象

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

Frame 对象的格式如下:

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

Example:

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

var data = [
  {"gender":"男","count":40},
  {"gender":"女","count":30}
];
names arr data
["gender", "count"] [["男", "女"], [40, 30]] [{"gender":"男","count":40}, {"gender":"女","count":30}]