Highcharts堆叠条形图无法显示总数据量，求实现预期效果的解决方案

完全可以实现你需要的效果，核心通过Highcharts内置的堆叠标签配置即可完成，无需额外复杂的自定义开发，具体配置方案如下：

配置步骤 #

• 第一步：开启条形图堆叠模式
  在plotOptions配置项中为bar类型开启堆叠，示例配置：

plotOptions: {
  bar: {
    stacking: 'normal',
    // 若需要显示每个堆叠分段的单独数值，可开启下方dataLabels配置
    // dataLabels: {
    //   enabled: true,
    //   color: '#fff'
    // }
  }
}

• 第二步：开启堆叠总数据量标签
  在yAxis配置项中开启stackLabels，即可在每个堆叠条形的末尾显示对应堆叠的总数值：

yAxis: {
  stackLabels: {
    enabled: true,
    // 可自定义标签样式适配设计需求
    style: {
      fontWeight: 'bold',
      color: '#333'
    },
    // 若需要调整标签位置偏移，可添加x/y参数
    // x: 5,
    // y: 0
  }
}

• 第三步：其余基础配置（如x轴分类、系列业务数据等）按原有逻辑填写即可，不需要额外修改。

最小可运行完整示例 #

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: '堆叠条形图总数据量示例'
  },
  xAxis: {
    categories: ['产品A', '产品B', '产品C', '产品D']
  },
  yAxis: {
    min: 0,
    title: {
      text: '总数值'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
      }
    }
  },
  plotOptions: {
    bar: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        color: '#fff'
      }
    }
  },
  series: [{
    name: '线上渠道',
    data: [5, 3, 4, 7]
  }, {
    name: '线下渠道',
    data: [2, 2, 3, 2]
  }, {
    name: '代理渠道',
    data: [3, 4, 4, 2]
  }]
});

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