G2

如何装载数据

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}]
图表对象配置（chart） Frame 常见操作