Highcharts中stacking参数定制：同值列不堆叠仅重叠显示

针对你遇到的问题——设置stacking='normal'后，相同X值的柱形会堆叠，但你希望这些点仅重叠显示而非堆叠，同时保留不同X值点的正常展示，这里有两种可行的解决方案：

方案1：关闭堆叠，让相同X值的点重叠显示 #

如果你的需求是让相同X值的柱形重叠（视觉上看起来是一个柱子），只需移除stacking: 'normal'配置即可。因为Highcharts的堆叠功能正是针对相同X值的系列点生效的，关闭后相同X的点会自动重叠在同一位置：

Highcharts.chart('container', {
  chart: { type: 'column' },
  xAxis: { },
  plotOptions: {
    series: {
      pointWidth: 2,
      // 移除stacking配置，或设置为null
      pointPlacement: 0
    }
  },
  series: [{
    data: [{"x": 0, "y": 0.8}, {"x": 2, "y": 0.8},{"x": 4, "y": 0.8}, {"x": 6, "y": 0.8}, {"x": 8, "y": 0.8}, {"x": 10, "y": 0.8}]
  }, {
    data: [{"x": 0, "y": 0.8}, {"x": 5, "y": 0.8},{"x": 10, "y": 0.8}, {"x": 15, "y": 0.8}, {"x": 20, "y": 0.8}, {"x": 25, "y": 0.8}]
  }]
});

这样修改后，X=0、10的位置会显示两个重叠的柱形（视觉上和单个柱形一致），而X=2、5等仅单个系列存在的点会正常显示在各自的位置。

方案2：预处理数据，移除重复X值的点 #

如果你希望相同X值的位置仅保留一个系列的点（彻底避免堆叠和重叠），可以提前过滤数据，移除其中一个系列里与另一个系列X值重复的点。比如我们过滤第二个系列，删除那些在第一个系列中已存在的X值：

// 原始数据
const series1Data = [{"x": 0, "y": 0.8}, {"x": 2, "y": 0.8},{"x": 4, "y": 0.8}, {"x": 6, "y": 0.8}, {"x": 8, "y": 0.8}, {"x": 10, "y": 0.8}];
const series2Data = [{"x": 0, "y": 0.8}, {"x": 5, "y": 0.8},{"x": 10, "y": 0.8}, {"x": 15, "y": 0.8}, {"x": 20, "y": 0.8}, {"x": 25, "y": 0.8}];

// 过滤第二个系列的重复X值点
const filteredSeries2Data = series2Data.filter(point => {
  return !series1Data.some(p => p.x === point.x);
});

// 初始化图表
Highcharts.chart('container', {
  chart: { type: 'column' },
  xAxis: { },
  plotOptions: {
    series: {
      pointWidth: 2,
      stacking: 'normal',
      pointPlacement: 0
    }
  },
  series: [
    { data: series1Data },
    { data: filteredSeries2Data }
  ]
});

这种方式下，X=0、10的位置只会显示第一个系列的柱形，第二个系列的重复点被移除，完全避免了堆叠情况。

你可以根据自己的视觉需求选择其中一种方案，两种方式都能实现你描述的效果。

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