Highcharts堆叠条形图移动端未居中呈右对齐，求解决配置方案

我来帮你搞定这个移动端堆叠条形图不居中、右对齐的问题！你的代码里有几个固定配置在小屏幕上会导致布局错乱，咱们一步步调整就能解决，不需要额外的自定义样式，通过Highcharts本身的配置就能搞定。

问题根源分析 #

问题主要出在两个硬编码配置上：

• 固定的marginLeft:120在移动端屏幕宽度有限时，会占据过多左侧空间，直接把图表挤到右侧
• x轴标签的固定width:'500px'和不合理的溢出配置，进一步加剧了布局偏移

具体修改步骤 #

1. 移除固定左侧边距，改用自适应边距 #

把chart配置里的marginLeft:120删掉，换成自适应边距，让Highcharts根据屏幕尺寸自动调整左右边距：

chart: {
  renderTo:'container',
  // 移除固定的marginLeft:120
  marginBottom: 100,
  type:'bar',
  // 改用自适应边距，左右设为auto或相对值
  margin: [50, 30, 100, 'auto']
},

2. 优化x轴标签的响应式显示 #

x轴标签的固定width:'500px'在移动端完全不合理，而且overflow: 'right'会导致标签溢出后挤压图表空间，改成以下配置：

xAxis: {
  categories: ['Computer Devices & Accessories', 'Computer Peripherals Hire & Repair Services', 'Computer Laptop Hardware & Peripherals', 'Computer Stationery, Hard disk, Ram, Pen Drives & Other Products', 'Internet Accessories'],
  labels: {
    // 移除overflow: 'right'和width:'500px'
    display: 'block',
    align: 'left',
    x:5,
    style: {
      fontSize: '0.8em', // 移动端缩小字体适配
      color:'#000'
      // 去掉固定width配置
    },
    // 可选：小屏幕下旋转标签避免换行溢出
    rotation: -45,
    y: 10 // 旋转后调整位置避免遮挡
  }
},

3. 开启Highcharts响应式配置（可选但推荐） #

添加responsive配置，针对不同屏幕尺寸动态调整图例、边距等参数，让图表在移动端更友好：

responsive: {
  rules: [{
    condition: {
      maxWidth: 768 // 移动端屏幕阈值
    },
    chartOptions: {
      legend: {
        layout: 'horizontal', // 移动端图例改成水平布局节省空间
        align: 'center',
        verticalAlign: 'bottom',
        floating: false,
        margin: 10
      },
      margin: [50, 10, 100, 'auto'] // 进一步缩小移动端左右边距
    }
  }]
}

修改后的完整代码 #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
  <div class="container"> 
    <div class="row"> 
      <div class="col-md-12"> 
        <div id="container" style="min-width: 100%; max-width:100%; height: 400px; margin: 0 auto"></div> 
      </div> 
    </div> 
  </div> 
  <script src="https://code.highcharts.com/highcharts.js"></script> 
  <script type="text/javascript"> 
    $(function () { 
      var chart = new Highcharts.Chart({ 
        chart: { 
          renderTo:'container',
          marginBottom: 100,
          type:'bar',
          margin: [50, 30, 100, 'auto']
        }, 
        credits: {enabled: false}, 
        legend: { 
          enabled: true, 
          layout: 'vertical', 
          backgroundColor: '#FFFFFF', 
          floating: true, 
          align: 'right', 
          verticalAlign: 'bottom', 
          margin: 50 
        }, 
        title: {text: null}, 
        tooltip: {}, 
        plotOptions: { 
          series: { 
            stacking: 'normal' 
          } 
        }, 
        series: [{ 
          name: 'John', 
          color: '#006666', 
          pointWidth: 40, 
          data: [2, 2, 1, 1, 1] 
        }, { 
          name: 'Jane', 
          color: '#00FF00', 
          pointWidth: 40, 
          data: [2, 2, 2, 1, 2] 
        }, { 
          name: 'Joe', 
          color: '#FF8C00', 
          pointWidth: 40, 
          data: [1, 1, 1, 1, 1], 
        }], 
        xAxis: { 
          categories: ['Computer Devices & Accessories', 'Computer Peripherals Hire & Repair Services', 'Computer Laptop Hardware & Peripherals', 'Computer Stationery, Hard disk, Ram, Pen Drives & Other Products', 'Internet Accessories'], 
          labels: { 
            display: 'block', 
            align: 'left', 
            x:5, 
            style: { 
              fontSize: '0.8em', 
              color:'#000' 
            },
            rotation: -45,
            y: 10
          } 
        }, 
        yAxis: { 
          min: 0, 
          allowDecimals: false, 
          title: { text: '' } 
        },
        // 添加响应式配置
        responsive: {
          rules: [{
            condition: {
              maxWidth: 768
            },
            chartOptions: {
              legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom',
                floating: false,
                margin: 10
              },
              margin: [50, 10, 100, 'auto']
            }
          }]
        }
      }); 
    }); 
  </script> 
</body> 
</html>

总结 #

这些修改都是通过Highcharts原生配置实现的，不需要额外写自定义CSS。核心思路就是去掉固定尺寸的硬编码，改用自适应配置和响应式规则，让图表在不同屏幕尺寸下都能自动调整布局，保持居中显示。

内容的提问来源于stack exchange，提问作者Satyanarayana Swamy