如何为Highcharts堆叠条形图的柱形添加背景色

嘿，我之前做Highcharts堆叠条形图的时候也纠结过这个问题，官方文档里确实没直接把这个做成现成配置，但其实有两种很实用的方法可以实现，刚好对应不同的场景：

这个方法最省心，原理是在所有堆叠系列的最底层加一个隐藏的系列，把它的数值设为对应类别的总数值，颜色设成你要的背景色，这样它就会自动铺满整个类别的条形区域，作为背景。

// 先准备你的基础数据
const categories = ['类别A', '类别B', '类别C'];
const originalSeries = [
  { name: '系列1', data: [12, 25, 18] },
  { name: '系列2', data: [8, 15, 10] },
  { name: '系列3', data: [5, 10, 7] }
];

// 计算每个类别的总数值，作为背景系列的数据
const backgroundData = categories.map((_, idx) => {
  return originalSeries.reduce((total, series) => total + series.data[idx], 0);
});

// 初始化图表
Highcharts.chart('container', {
  chart: { type: 'bar' },
  title: { text: '堆叠条形图带类别背景' },
  xAxis: { categories: categories },
  yAxis: { min: 0, title: { text: '数值' } },
  plotOptions: {
    bar: { stacking: 'normal' }
  },
  series: [
    // 背景系列，放在最前面（会叠在最底层）
    {
      name: '背景',
      data: backgroundData,
      color: '#f5f5f5', // 替换成你要的背景色
      enableMouseTracking: false, // 禁用鼠标交互，避免干扰正常系列
      showInLegend: false, // 不显示在图例里
      stacking: 'normal'
    },
    ...originalSeries // 你的原始堆叠系列
  ]
});

如果你的参考图是每个堆叠的小柱子都有自己的背景（比如每个系列的条后面都有独立背景），那可以用Highcharts的renderer API，在图表加载完成后手动绘制矩形背景，放在每个柱形的下方。

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    events: {
      load: function() {
        const chart = this;
        // 遍历所有系列的所有数据点
        chart.series.forEach(series => {
          series.points.forEach(point => {
            // 获取当前柱形的位置和尺寸参数
            const shape = point.shapeArgs;
            // 绘制背景矩形，这里可以调整偏移量和尺寸来匹配你的需求
            chart.renderer.rect(
              shape.x - 1, // 向左偏移1px，让背景稍微宽一点
              shape.y - 1, // 向上偏移1px
              shape.width + 2, // 宽度增加2px
              shape.height + 2, // 高度增加2px
              2 // 圆角半径，可选
            )
            .attr({
              fill: '#e8e8e8', // 背景色
              zIndex: -1 // 把背景放在柱形下方
            })
            .add();
          });
        });
      }
    }
  },
  xAxis: { categories: ['类别A', '类别B', '类别C'] },
  yAxis: { min: 0 },
  plotOptions: { bar: { stacking: 'normal' } },
  series: [
    { name: '系列1', data: [12, 25, 18] },
    { name: '系列2', data: [8, 15, 10] },
    { name: '系列3', data: [5, 10, 7] }
  ]
});

你可以根据参考图的具体效果选对应的方案：如果是整个类别条形的统一背景，方案一更简单；如果是每个堆叠小条都有独立背景，方案二更灵活。

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