如何在Google Visualization Table中用data.group实现多列求和分组

错误原因分析 #

你遇到的错误有两个核心问题：

1. group方法参数格式错误：google.visualization.data.group的第三个参数必须是包含所有聚合列配置的数组，你把两个聚合配置拆成了独立参数，导致方法解析异常。
2. 数据源列数不足：你修改了nationalSummary的view.columns，但代码中实际获取数据的是table.getDataTable()，这个table对应的DataTable仅包含前两列（索引0、1），无法访问索引2的列。

正确代码修改 #

步骤1：修正group方法参数格式 #

将两个聚合列的配置合并到同一个数组中，作为group方法的第三个参数：

var nationalSummaryArray = google.visualization.data.group(nationalSummaryNew, [
  {
    column: 0,
    type: 'string',
    label: 'Column A'        
  }
], [
  {
    column: 1,
    type: 'number',
    label: 'Column B',
    aggregation: google.visualization.data.sum
  },
  {
    column: 2,
    type: 'number',
    label: 'Column C',
    aggregation: google.visualization.data.sum
  }
]);

步骤2：确保数据源包含Column C #

替换数据源获取逻辑，从已配置好三列的nationalSummary中获取DataTable：

// 替换原有的var nationalSummaryNew = table.getDataTable();
var nationalSummaryNew = nationalSummary.getDataTable();

完整修正后的关键代码片段 #

var nationalSummary = new google.visualization.ChartWrapper({
  'chartType': 'Table',
  'containerId': 'nationalSummary_div',
  dataTable: data,
  'options': {
    'width': '100%',
    'rowCount': 'enable',
    'allowHtml': true,
    'alternatingRowStyle': true,
    'cssClassNames': {
      tableCell: 'large-font',
      headerCell: 'nsHeaderCell',
    }
  },
  'view': {
    'columns': [0,1,2] // 确保包含第三列
  }
});

var container = document.getElementById('buildingDetail_div');
google.visualization.events.addListener(nationalSummary, 'ready', function () {
  var nationalSummaryNew = nationalSummary.getDataTable();
  var nationalSummaryArray = google.visualization.data.group(nationalSummaryNew, [
    {
      column: 0,
      type: 'string',
      label: 'Column A'        
    }
  ], [
    {
      column: 1,
      type: 'number',
      label: 'Column B',
      aggregation: google.visualization.data.sum
    },
    {
      column: 2,
      type: 'number',
      label: 'Column C',
      aggregation: google.visualization.data.sum
    }
  ]);
  // 后续可将nationalSummaryArray绑定到表格进行显示
});

// 绘制nationalSummary表格
nationalSummary.draw();

效果验证 #

修改完成后，nationalSummaryArray会生成按Column A分组，同时对Column B、Column C求和的DataTable，完全匹配你需要的表格效果。

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