AmCharts 4：如何为分组堆叠柱状图的各组显示堆叠总计

我完全懂你现在的困扰——照着官方示例做了分组堆叠柱状图，想在每个堆叠柱顶显示该组的总和，结果{valueY.sum}直接把整个Y轴的所有数据加起来了，根本不是单个分组堆叠的总计对吧？而且之前试了在数据里加总计字段，结果点图例取消选择系列时，数值没法动态更新，确实头疼。

下面给你一套能完美解决这个问题的方案，既不用改原始数据，还能支持动态交互更新：

核心思路 #

默认的valueAxis.calculateTotals = true是计算整个Y轴所有数据的总和，所以我们得自己针对**每个X轴分组（也就是每个堆叠组）**单独计算总和，然后把这个值绑定到堆叠最上层的标签上，同时监听系列的显示/隐藏事件，动态更新总计。

完整代码实现 #

// 创建Y轴，关闭默认的总计计算
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.calculateTotals = false;

// 给最上层的堆叠系列添加总计标签容器
let topSeries = chart.series.getIndex(chart.series.length - 1);
let totalBullet = topSeries.bullets.push(new am4charts.LabelBullet());
totalBullet.label.text = "0"; // 初始占位值
totalBullet.label.y = -12; // 调整标签和柱子的间距，避免重叠
totalBullet.label.fontWeight = "bold"; // 可选：加粗突出总计
totalBullet.label.hideOversized = true;

// 定义计算并更新总计的函数
function updateStackTotals() {
  chart.xAxis.dataItems.forEach(xDataItem => {
    let stackTotal = 0;
    // 遍历当前分组下的所有系列，累加可见系列的数值
    chart.series.forEach(series => {
      const dataItem = series.dataItems.getIndex(xDataItem.index);
      if (dataItem && !dataItem.hidden) {
        stackTotal += dataItem.valueY;
      }
    });
    // 更新当前分组的总计标签
    const topDataItem = topSeries.dataItems.getIndex(xDataItem.index);
    if (topDataItem.bullets.length > 0) {
      topDataItem.bullets.getIndex(0).label.text = stackTotal.toFixed(1); // 可按需调整小数精度
    }
  });
}

// 数据加载完成后首次计算总计
chart.events.on("datavalidated", updateStackTotals);

// 监听图例的显示/隐藏事件，动态更新总计
chart.series.forEach(series => {
  series.events.on("hidden", updateStackTotals);
  series.events.on("shown", updateStackTotals);
});

代码说明 #

• 关闭默认总计：先把valueAxis.calculateTotals设为false，避免默认的全局总和干扰。
• 添加标签容器：在最上层的堆叠系列上添加LabelBullet，用来承载总计文本。
• 自定义计算逻辑：updateStackTotals函数会遍历每个X轴分组，累加该分组下所有可见系列的valueY，得到单个堆叠的真实总计。
• 动态响应交互：监听系列的hidden和shown事件，每次用户点击图例切换系列显示状态时，自动重新计算并更新总计，完美解决你之前遇到的动态更新问题。

这样设置后，每个堆叠柱顶就会显示当前分组的总和，而且不管你怎么切换图例的显示状态，数值都会实时更新，完全符合需求～

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