Highcharts堆叠柱状图偶现列重叠问题求助

针对你遇到的datetime轴堆叠柱状图列重叠问题，且需要保留groupPadding区分日期的需求，可尝试以下几种实用方案：

• 固定pointWidth控制柱子宽度
  在plotOptions.column中设置固定的pointWidth值（比如15，可根据图表尺寸调整），同时保留合适的groupPadding（比如0.1）。这样每个日期下的两个堆叠柱子总宽度被固定，不会因数据稀疏、时间间隔大而自动撑宽导致重叠：

  plotOptions: {
    column: {
      stacking: 'normal',
      groupPadding: 0.1,
      pointWidth: 15
    }
  }
  

• 明确pointRange定义日期区间
  给每个系列设置pointRange，明确单个日期对应的时间范围（比如一天的毫秒数24 * 3600 * 1000），让图表基于这个区间计算分组宽度，避免因时间间隔不均导致的柱子宽度异常：

  series: [{
    name: '系列1',
    type: 'column',
    pointRange: 24 * 3600 * 1000,
    // 数据...
  }, {
    name: '系列2',
    type: 'column',
    pointRange: 24 * 3600 * 1000,
    // 数据...
  }]
  

• 动态计算pointWidth适配图表尺寸
  如果需要适配不同屏幕尺寸，可在图表加载时根据数据量和图表宽度动态计算pointWidth，确保每个日期组的两个堆叠柱子总宽度加上groupPadding不会超出日期区间：

  chart: {
    events: {
      load: function() {
        var dataCount = this.xAxis[0].series[0].data.length;
        var availableWidth = this.chartWidth * (1 - this.plotOptions.column.groupPadding);
        var calculatedWidth = Math.floor(availableWidth / dataCount / 2); // 除以2对应每个日期的两个堆叠组
        this.series.forEach(s => s.update({ pointWidth: calculatedWidth }, false));
        this.redraw();
      }
    }
  }
  

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