简介

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

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

如何使用

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

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

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

统计类型

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

• 传统统计函数
  • summary：汇总统计，主要计算数据集合的最大值、最小值、平均数等；
  • bin：封箱统计，将数据划分成一个个的区域，然后在外面嵌套汇总统计；
  • smooth：线性回归、非线性回归以及各种平滑插值算法，用于查找数据的规律；
  • density：样本估计总体的概率密度；
  • region：计算数值区间，误差区间等；
• 数据变换函数
  • 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();
});