G2

Frame

获取方式：G2.Frame

G2 接收的数据格式非常简单：标准的JSON数组，每个数组元素是一个 JSON 对象，G2 在图表的内部将数据转换成一个 Frame 对象，也可以由用户直接创建 Frame 对象，同时执行一些数据操作。

语法

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

var Frame = G2.Frame;
var frame = new Frame(data); // 图表内部做的转换
frame = Frame.sort(frame, 'count'); // 按照count 排序
chart.source(frame);

方法

Frame 数据集合的操作基本上都是列操作，下面列出了 Frame 数据集合对象提供的操作方法：

colNames

使用方式：frame.colNames()

返回结果：Array

返回数据集合的所有列名称。

colCount

使用方式：frame.colCount()

返回结果：Number

返回数据集合列的个数。

colIndex

使用方式：frame.colIndex(name)

返回结果：Number

根据列名称获取对应的列索引。

colArray

使用方式：frame.colArray(name)

返回结果：Array

根据列名称、索引获取列对应的数组。

colReplace

使用方式：frame.colReplace(name, arr)

返回结果: Frame

替换数据集合中的列数组，返回数据集合本身，原数据集合发生改变。

参数

  • name: String | Number

可以是列名称也可以是索引

  • arr: Array

要替换的值。

代码示例

var data = [
  {a: 'a', value: 1},
  {a: 'b', value: 2},
  {a: 'c', value: 3}
];

var Frame = G2.Frame;
var frame = new Frame(data);
frame.colReplace('value', [11, 22, 33]);
console.log(JSON.stringify(frame.toJSON())); // [{"a":"a","value":11},{"a":"b","value":22},{"a":"c","value":33}]

rowCount

使用方式：frame.rowCount()

返回结果：Number

返回数据集合行的个数，即数据的个数。

rowObject

使用方式：frame.rowObject(index)

返回结果：Object

根据索引获取行对象。

cell

使用方式：frame.cell(rowIndex, colName)

返回结果：返回指定行索引和列名称（列索引)的数值。

toArray

使用方式：frame.toArray()

返回结果：Array

将数据集合生成列数组。

代码示例

var data = [
  {a: 'a', value: 1},
  {a: 'b', value: 2},
  {a: 'c', value: 3}
];

var Frame = G2.Frame;
var frame = new Frame(data);
console.log(JSON.stringify(frame.toArray())); // [["a","b","c"],[1,2,3]]

toJSON

使用方式：frame.toJSON()

返回结果：Array

数据集合生成 JSON 数组。

s

使用方式：frame.s()

返回结果：String

将整个数据集合生成字符串，一般用于调试输出现有集合。

addCol

使用方式：frame.addCol(name, arr|fn)

frame 添加列。

参数

  • name: String

列名称

  • arr：Array | Function

可以是数组也可以是回调函数。

代码示例


var data = [
  {a: 'a', value: 1},
  {a: 'b', value: 2},
  {a: 'c', value: 3}
];

var Frame = G2.Frame;
var frame = new Frame(data);
frame.addCol('type', ['A', 'B', 'C']);
frame.addCol('color', function(obj) {
  if (obj.value > 2) {
    return 'red';
  } else {
    return 'yellow';
  }
});
console.log(JSON.stringify(frame.toJSON()));
// [{"a":"a","value":1,"type":"A","color":"yellow"},{"a":"b","value":2,"type":"B","color":"yellow"},{"a":"c","value":3,"type":"C","color":"red"}]

col

使用方式：frame.col(name)

返回结果：Frame

根据列名称或者索引获取列构成的集合。返回的结果是新生成的数据集合。

cols

使用方式：frame.cols(names)

返回结果：Frame

根据多个列名称或者索引生成新的数据集合。

row

使用方式：frame.row(rowIndex)

返回结果：Frame

根据行索引生成新的数据集合。

rows

使用方式：frame.rows(rowIndexs)

返回结果：Frame

根据多个行索引生成新的数据集合。

sub

使用方式：frame.sub(startCol, endCol, startRow, endRow)

返回结果：Frame

根据行和列获取一个子集合。

静态方法

Frame 类有大量静态方法，用于统计 Frame 的数据、合并、排序等功能：

mean

使用方式：Frame.mean(frame, x)

返回结果： Number

计算列 x 的平均值。

geometric_mean

使用方式：Frame.geometric_mean(frame, x)

返回结果：Number

计算列 x 的几何平均值。

sum

使用方式：Frame.sum(frame, x)

返回结果：Number

计算列 x 的和。

max

使用方式：Frame.max(frame, x)

返回结果：Number

计算列 x 的最大值。

min

使用方式：Frame.min(frame, x)

返回结果：Number

计算列 x 的最小值。

range

使用方式：Frame.range(frame, x)

返回结果：Array

计算列 x 的最小值和最大值范围。

mode

使用方式：Frame.mode(frame, x)

返回结果：Number

计算列 x 的众数（个数最多的数）。

median

使用方式：Frame.median(frame, x)

返回结果：Number

计算列 x 的中位数。

variance

使用方式：Frame.variance(frame, x)

返回结果：Number

计算列 x 的方差。

standard_deviation

使用方式：Frame.standard_deviation(frame, x)

返回结果：Number

计算列 x 的标准方差。

sort

使用方式：Frame.sort(frame, x)

返回结果：Frame

返回按照列排序后的数据集合，源 frame 不受影响，会返回新的 frame 对象。

sortBy

使用方式：Frame.sortBy(frame, callback)

返回结果：Frame

返回按照列排序后的数据集合，fn 是排序的函数，函数原型是 function(obj1, obj2)。

参数

  • callback: Function

排序的回调函数。

代码示例

var data = [
  {a: 'a', value: 13},
  {a: 'b', value: 2},
  {a: 'c', value: 3}
];

var Frame = G2.Frame;
var frame = new Frame(data);
frame = Frame.sortBy(frame, function(obj1, obj2) {
  return obj1.value > obj2.value;
});
console.log(JSON.stringify(frame.toJSON())); // [{"a":"b","value":2},{"a":"c","value":3},{"a":"a","value":13}]

filter

使用方式：Frame.filter(frame, callback)

返回结果：Frame

参数

  • callback: Function

过滤的回调函数。

过滤数据集合，callback 的函数原型 function(obj,index) 返回 true 或者 false。

代码示例

var data = [
  {a: 'a', value: 13},
  {a: 'b', value: 2},
  {a: 'c', value: 3}
];

var Frame = G2.Frame;
var frame = new Frame(data);
frame = Frame.filter(frame, function(obj, index) {
  return obj.value < 10;
});
console.log(JSON.stringify(frame.toJSON())); // [{"a":"b","value":2},{"a":"c","value":3}]

group

使用方式：Frame.group(frame, condition)

返回结果：Array

按照条件进行分组，返回 [frame1,frame2...frameN]

参数

  • condition: Function | Array

condition 分组的条件，可以根据条件函数或者列名称进行分组。

代码示例

var data = [
  {"name":453,"carat":0.71,"cut":"Ideal","color":"I","clarity":"VVS2","depth":60.2,"table":56,"price":2817,"x":5.84,"y":5.89,"z":3.53},
  {"name":662,"carat":0.72,"cut":"VeryGood","color":"F","clarity":"VS1","depth":60.2,"table":59,"price":2846,"x":5.79,"y":5.84,"z":3.5},
  {"name":499,"carat":0.7,"cut":"Ideal","color":"I","clarity":"SI1","depth":60.7,"table":56,"price":2822,"x":5.75,"y":5.72,"z":3.48},
];

var Frame = G2.Frame;
var frame = new Frame(data);

var groups = Frame.group(frame, ['cut', 'color']);
console.log(JSON.stringify(groups));
// [[{"name":453,"carat":0.71,"cut":"Ideal","color":"I","clarity":"VVS2","depth":60.2,"table":56,"price":2817,"x":5.84,"y":5.89,"z":3.53},{"name":499,"carat":0.7,"cut":"Ideal","color":"I","clarity":"SI1","depth":60.7,"table":56,"price":2822,"x":5.75,"y":5.72,"z":3.48}],[{"name":662,"carat":0.72,"cut":"VeryGood","color":"F","clarity":"VS1","depth":60.2,"table":59,"price":2846,"x":5.79,"y":5.84,"z":3.5}]]

groupToMap

使用方式：Frame.groupToMap(frame, condition)

返回结果：Array

  • 按照条件进行分组，形成 map 键值对,返回 {key1: frame1, key2: frame2, key3: frame3, .... keyn: framen}；
  • condition 条件可以是列名的数组也可以是一个函数返回一个唯一的键值。

complement

使用方式：Frame.complement(frame, cols)

返回结果：Frame

取指定列的补集组成的数据集合，例如 names: ['a','b','c','d']，Frame.complement(frame，['a','c'])，生成的 names: ['b', 'd'] 的数据集合。

代码示例

var data = [
  {a: 'a', value: 13},
  {a: 'b', value: 2},
  {a: 'c', value: 3}
];

var Frame = G2.Frame;
var frame = new Frame(data);
frame = Frame.complement(frame, ['value']);
console.log(JSON.stringify(frame.toJSON())); // [{"a":"a"},{"a":"b"},{"a":"c"}]

merge

使用方式：Frame.merge(frame1, frame2, ..., frameN)

返回结果：Frame

合并传入的集合成为一个集合，列不发生变化，假设传入的集合的列一致，仅是增加行。

combine

使用方式：Frame.combine(frame1, frame2, ..., frameN)

返回结果：Frame

合并传入的集合成为一个集合，列进行组合，行的数目不变，仅仅是列变化。

combineColumns

使用方式：Frame.combineColumns(frame, cols, name, typeName, retains)

返回结果：Frame

将多列合并成一列，然后基于多列的数据进行统计。

参数

  • cols: Array

是要合并的列。

  • name: String

合并的新列的名称，默认为 type。

  • typeName: String

存储原先字段的名字作为分类。

  • retains: String | Array

除了合并的列之外保留的列，不传入则默认为只保留剩余没有参与合并的列。

使用详见教程 ->。

combineArray

使用方式：Frame.combineArray(newName, arr0, arr1, ..., arrN)

返回结果：Frame

将多个数组合并成一个数据集合，并形成新的列，新的列的值为数组的索引。

参数

  • newName: String

生成新的列的字段名，默认为 'type'。

代码示例

var arr1 = [{a: 'a1','b': 'b1'}];
var arr2 = [{a: 'a2','b': 'b2'}];

// 新的数据 ： [{a: 'a1','b': 'b1',type: 0}, {a: 'a2','b': 'b2',type:1}]
Frame.combineArray(arr1, arr2);
// 新的数据 ： [{a: 'a1','b': 'b1',myType: 0},{a: 'a2','b': 'b2',myType: 1}];
Frame.combineArray('myType', arr1, arr2);