如何装载数据
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 支持两种格式的数据源:
- JSON 数组
- 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}] |