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);