Highcharts堆叠柱间距调整及堆叠名称图例交互实现问询

问题1：设置pointWidth后堆叠柱组间距过大 #

当你固定了pointWidth后，Highcharts会根据容器宽度、柱宽和分类数量自动计算柱组间距。要缩小这个间距，你可以调整groupPadding为负数（它控制柱组之间的空白比例，负数会让柱组更紧凑甚至轻微重叠），同时可以配合调整图表的左右内边距进一步优化：

在plotOptions.column里添加这两个配置：

groupPadding: -0.1, // 关键：设置负数缩小柱组间距
pointPadding: 0     // 保持堆叠柱内部无间距

如果觉得图表左右两侧空白太多，还可以给chart添加内边距配置：

chart: {
  type: 'column',
  spacingLeft: 10,
  spacingRight: 10
}

问题2：图例显示堆叠名称并支持点击隐藏对应堆叠 #

默认图例是按单个series名称显示的，要实现按堆叠名称（Forecast/Real）显示并控制整个堆叠的显示/隐藏，我们可以通过添加占位series+自定义图例点击事件来实现：

1. 给所有实际数据的series设置showInLegend: false，不让它们出现在图例里；
2. 添加两个空的占位series，分别对应Forecast和Real堆叠，设置它们的名称为堆叠名并开启图例显示；
3. 在图例的itemClick事件中，遍历所有series，切换对应堆叠下所有series的可见性。

完整修改后的代码 #

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
  <div id="container"></div>
</figure>
<script>
Highcharts.chart('container', {
  chart: {
    type: 'column',
    spacingLeft: 10,
    spacingRight: 10
  },
  title: {
    text: 'Stacked column chart'
  },
  xAxis: {
    categories: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total fruit consumption'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: ( // theme
          Highcharts.defaultOptions.title.style &&
          Highcharts.defaultOptions.title.style.color
        ) || 'gray'
      }
    }
  },
  legend: {
    align: 'center',
    x: 0,
    verticalAlign: 'bottom',
    y: 5,
    backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
    borderColor: '#CCC',
    borderWidth: 0,
    shadow: false,
    // 自定义图例点击事件
    itemClick: function(e) {
      const stackName = e.target.textStr;
      // 遍历所有series，切换对应堆叠的可见性
      this.chart.series.forEach(series => {
        if (series.stack === stackName) {
          series.setVisible(!series.visible, false);
        }
      });
      this.chart.redraw();
      // 阻止占位series的默认行为
      return false;
    }
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: { enabled: true },
      groupPadding: -0.1,
      pointPadding: 0
    },
    series: {
      dataLabels: {
        formatter: function() {
          return this.series.name;
        },
        enabled: true,
        color: '#fff',
        shadow: false,
        style: {
          fontSize: "8px",
          textShadow: "0px"
        }
      },
      pointWidth: 50,
      stacking: 'normal',
      showInLegend: false // 隐藏实际数据series的图例项
    }
  },
  series: [{
    name: 'Component',
    data: [[0,5], [1,3], [2,4], [3,7], [4,3]],
    stack: 'Forecast'
  }, {
    name: 'Module',
    data: [[0,2], [1,2], [2,3], [3,2], [4,2]],
    stack: 'Forecast'
  }, {
    name: 'Board',
    data: [3, 5, 5, 3, 2],
    stack: 'Forecast'
  }, {
    name: 'Component',
    data: [6, 4, 5, 8, 4],
    stack: 'Real'
  }, {
    name: 'Module',
    data: [3, 3, 4, 3, 3],
    stack: 'Real'
  }, {
    name: 'Board',
    data: [4, 6, 6, 4, 3],
    stack: 'Real'
  }, 
  // 添加两个占位series，用于显示堆叠图例
  {
    name: 'Forecast',
    stack: 'Forecast',
    data: [],
    showInLegend: true,
    enableMouseTracking: false, // 禁用鼠标跟踪避免干扰
    color: '#7cb5ec' // 自定义图例颜色
  }, {
    name: 'Real',
    stack: 'Real',
    data: [],
    showInLegend: true,
    enableMouseTracking: false,
    color: '#90ed7d'
  }]
});
</script>

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