如何在PivotTable.js的总计列中显示平均值而非总和

我明白你想要让PivotTable.js的总计列显示对应行/列所有数据的真实平均值，而不是默认的分组平均值总和。咱们来一步步解决这个问题：

默认的average聚合器在计算总计行/列时，会把各个分组的平均值直接相加，这显然不符合你的需求。我们需要自定义一个聚合器，让它全程跟踪数据的总和与数量，无论是单个分组还是总计，都通过「总和÷数量」来计算真实平均值。

自定义真实平均值聚合器 #

var trueAverage = function(format) {
  return function(attr) {
    return {
      total: 0,
      count: 0,
      // 处理单条数据
      push: function(record) {
        var val = parseFloat(record[attr]);
        if (!isNaN(val)) {
          this.total += val;
          this.count += 1;
        }
      },
      // 计算当前分组的平均值
      value: function() {
        return this.count === 0 ? 0 : this.total / this.count;
      },
      format: format,
      numInputs: 0,
      // 处理总计的合并逻辑
      aggregator: function() {
        return {
          total: 0,
          count: 0,
          push: function(other) {
            this.total += other.total;
            this.count += other.count;
          },
          value: function() {
            return this.count === 0 ? 0 : this.total / this.count;
          },
          format: format
        };
      }
    };
  };
};

修改后的调用代码 #

把你原来的聚合器替换成这个自定义的trueAverage，就能得到你想要的效果：

var numberFormat = $.pivotUtilities.numberFormat;
var intFormat = numberFormat({digitsAfterDecimal: 1});

$("#output").pivot(
  [
    {color: "green", shape: "null", value: 0},
    {color: "blue", shape: "circle", value: 1},
    {color: "red", shape: "triangle", value: 2},
    {color: "red", shape: "triangle", value: 12},
    {color: "blue", shape: "circle", value: 3},
    {color: "blue", shape: "triangle", value: 12}
  ],
  {
    rows: ["color"],
    cols: ["shape"],
    aggregator: trueAverage(intFormat)("value")
  }
);

原理说明 #

这个自定义聚合器做了两件关键的事：

1. 每个分组都会记录该组内数据的总和和数据数量，通过这两个值计算分组平均值
2. 计算总计的时候，会把所有分组的总和和数量合并，再用总总和除以总数量得到真实的整体平均值，而不是把分组平均值简单相加

另外，你提供的successRate聚合器目前只跟踪了总和，如果要改成类似的平均值计算，也需要添加对数据数量的统计逻辑哦。

内容的提问来源于stack exchange，提问作者niran