如何用Highcharts实现每组求和并在组左侧添加汇总柱形

核心问题出在对Highcharts的series和data对应关系理解有误：你把汇总值插到了每个月份系列的data开头，导致每个月份系列多了一个数据点，完全达不到“每组左侧添加汇总柱形”的效果。

两处具体错误 #

1. 求和逻辑错误：你计算的是每个月份所有数据的总和（比如April的3个100相加得300），但实际需要的是每个x轴分组的总和（比如第一个分组是April100+May50+Jun80=230）。
2. 汇总柱形的添加方式错误：应该新增一个独立的汇总系列，而非修改原有月份系列的data。

修正后的代码 #

const seriesData = [
    {
        "data": [100, 100, 100],
        "name": "April"
    },
    {
        "data": [50, 50, 50],
        "name": "May"
    },
    {
        "data": [80, 80, 80],
        "name": "Jun"
    }
];

// 计算每个x轴分组的总和
const groupSums = [];
const groupCount = seriesData[0].data.length;
for (let i = 0; i < groupCount; i++) {
  let total = 0;
  seriesData.forEach(series => total += series.data[i]);
  groupSums.push(total);
}

// 将汇总系列插入到最前方
seriesData.unshift({
  name: "汇总",
  data: groupSums,
  color: "#ccc" // 给汇总柱设置区分色，匹配参考截图效果
});

Highcharts.chart('container', {
  chart: { type: 'column' },
  title: { text: 'Monthly Average Rainfall' },
  xAxis: { categories: ['组1', '组2', '组3'] }, // 可选：给x轴分组添加标签
  series: seriesData
});

修正逻辑说明 #

• 按分组计算总和：遍历每个x轴分组的索引，累加所有月份系列对应位置的数据，得到每个组的总和数组。
• 新增独立汇总系列：将总和数组封装为一个新系列，插入到所有月份系列的最前面，这样每个分组左侧就会显示对应组的汇总柱形。
• 样式优化：给汇总柱设置灰色，与其他月份的柱子形成视觉区分，更贴合你提供的参考截图效果。

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