Google Pie Chart添加列标题及GROUP BY两列的图例展示求助

步骤1：实现两列GROUP BY数据聚合 #

先对原始数据按指定两列分组并完成数值聚合（以求和为例）。假设你的my_2d数组结构为[[地点, 分类, 重量], ...]，代码如下：

// 初始化分组存储对象
const groupedData = {};

// 遍历原始数据完成分组求和
for (let i = 0; i < my_2d.length; i++) {
  const location = my_2d[i][0];
  const category = my_2d[i][1]; // 这是要显示在图例的第二列
  const pounds = parseInt(my_2d[i][2]);

  // 用两列组合作为唯一键，确保分组唯一性
  const groupKey = `${location}-${category}`;
  if (groupedData[groupKey]) {
    groupedData[groupKey] += pounds;
  } else {
    groupedData[groupKey] = pounds;
  }
}

步骤2：构造饼图所需的DataTable #

Google饼图的图例默认读取第一列（字符串类型）的内容，因此只需将你要展示的列设为DataTable的第一列：

var data = new google.visualization.DataTable();        
data.addColumn('string', '分类'); // 图例显示的列名
data.addColumn('number', '总重量');

// 将分组后的数据添加到DataTable
for (const key in groupedData) {
  // 拆分键获取分类信息，可根据你的分组逻辑调整
  const category = key.split('-')[1];
  data.addRow([category, groupedData[key]]);
}

可选：显示组合图例文本 #

如果需要在图例中同时展示两列信息（比如地点+分类），修改添加行的逻辑即可：

for (const key in groupedData) {
  const [location, category] = key.split('-');
  data.addRow([`${location} - ${category}`, groupedData[key]]);
}

验证饼图配置 #

确保饼图绘制代码正确调用，图例将自动根据DataTable第一列内容生成：

const chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {
  title: '重量统计',
  legend: { position: 'right' } // 可自定义图例位置
});

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