简介

Stat,即对数据进行统计变换,该模块提供以下两种方式对数据信息进行处理:

  1. 对数据信息进行汇总,将多条记录合并成一条,如获取数据集合某一列的最大值、最小值等;
  2. 将一条记录分解为多条记录,如求一个数据点的区域范围等。

如何使用

通过 G2.Stat 来获取,Stat 提供了多种统计变换函数,需要结合图形属性一起使用,如下所示:

chart.intervalStack().position(Stat.summary.percent('value'));
chart.interval().position('x*y').label(Stat.summary.percent('y')).color('x');

所有的图形属性方法都支持嵌套统计函数。

统计类型

根据对数据的处理方式的不同,G2 中提供了以下几种统计变换函数:

  1. 传统统计函数
    • summary:汇总统计,主要计算数据集合的最大值、最小值、平均数等;
    • bin:封箱统计,将数据划分成一个个的区域,然后在外面嵌套汇总统计;
    • smooth:线性回归、非线性回归以及各种平滑插值算法,用于查找数据的规律;
    • density:样本估计总体的概率密度;
    • region:计算数值区间,误差区间等;
  2. 数据变换函数
    • map:用于地图的绘制计算;
    • treemap:用于矩阵树图的绘制计算。
    • link:用于计算关系图中边的坐标。

具体各个统计变换函数的说明和使用,请查看Stat api。

统计变换可将输入的数据集看做输入,将返回的数据集作为输出,因此统计变换会向源数据集中插入新的变量,这些新生成的变量可以被直接调用。

以该语句为例:

chart.point().position(Stat.summary.max('cut*price'));

这是一个点图的绘制语法,在 position 属性中嵌套了统计变换函数,该统计函数表示将数据按照 'cut'(切割工艺)进行分组,然后统计每个分组的最高 'price'(价格),该统计会产生新的字段 ..max 表示各个 cut 的最高价格,然后由 cut..max 和两个字段共同决定数据点的位置。

类似的还有:

Stat.summary.count('x') 按照 'x' 分组后计算每个分组的个数,产生一个新的字段 ..count

Stat.summary.percent('x') 按照 'x' 分组后计算每个分组 x 的百分占比,产生一个新的字段 ..percent

Stat.summary.proportion('x') 统计按照 'x' 分组后计算每个分组x字段个数,占总数的比例,产生一个新的字段 ..proportion

结合几何标记和统计变换

G2 中没有具体图表类型的概念,图表都是由不同的图形语法元素组合而成的。直方图和马赛克图就是将几何对象和统计变换函数进行组合生成的。

绘制马赛克图

使用 polygon 几何标记和 Stat.bin.rect()Stat.summary.count() 统计函数绘制马赛克图。

$.getJSON('../../../../../static/data/diamond.json', function(data) {
  var Stat = G2.Stat;
  var chart = new G2.Chart({ // 创建图表
    id : 'c1',
    width: 600,
    height : 300
  });
  chart.source(data);
  chart.polygon().position(Stat.bin.rect('carat*price',0.01)).color(Stat.summary.count(),'lightness');
  chart.render();
});

绘制直方图

使用 interval 几何标记和 Stat.bin.rect()Stat.summary.count() 统计函数绘制直方图。

这个例子中,会将默认生成的 ..count 字段映射至 y 轴,我们可以直接调用 ..count 字段。

chart.axis('..count', {
  title: {
    fill: 'red',
    fontSize: 14
  }
});
$.getJSON('../../../../../static/data/car.json', function(data) {
  var Stat = G2.Stat;
  var chart = new G2.Chart({ // 创建图表
    id : 'c2',
    width: 600,
    height : 300
  });
  chart.source(data);
  chart.axis('..count', {
    title: {
      fill: 'red',
      fontSize: 16
    }
  });
  chart.interval().position(Stat.summary.count(Stat.bin.rect('hwy')));
  chart.render();
});