Highcharts堆叠柱状图：含负值时顶部显示系列值标签问题

要解决负值堆叠底部显示多余标签的问题，只需在yAxis.stackLabels的格式化函数中判断标签是否为底部标签，仅保留顶部标签即可：

• 利用Highcharts提供的isBottom属性，在formatter函数中过滤掉底部标签，只返回顶部标签的内容。

修改后的核心代码 #

yAxis: {
  stackLabels: {
    enabled: true,
    formatter: function() {
      // 仅显示堆叠顶部的总和标签，过滤底部标签
      return this.isBottom ? null : this.total;
    }
  }
},
series: [
  { name: 'A', data: [5, 3, 4, 7, 2], stack: 'a' },
  { name: 'B', data: [-2, -3, -4, -7, -2], stack: 'a' },
  { name: 'C', data: [3, 4, 4, 2, 5], stack: 'b' },
  { name: 'D', data: [2, 5, 6, 2, 1], stack: 'b' }
]

说明 #

• this.isBottom是Highcharts堆叠标签内置的属性，用于判断当前标签是否为堆叠组的底部标签。
• 返回null会让底部标签不渲染，只保留每个堆叠柱子顶部的总和标签，完全符合需求。

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