无法实现Highcharts堆叠条形图数据标签左右对齐的问题

你的问题出在三个核心点：

• Highcharts数据标签默认用SVG渲染，必须开启useHTML: true，否则HTML标签的样式不会生效
• 行内元素<span>默认宽度为内容宽度，text-align属性无法起作用，需要改为块级元素并设置宽度占满条形
• 你对colorIndex的判断和需求对应错误，需求里30%的是HYBRID（第三个系列，colorIndex=2），50%是GAS（第二个系列，colorIndex=1），20%是EV（第一个系列，colorIndex=0）

修正后的完整代码如下：

<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', {
    colors:['#006fcf','#00175A','#808080'],
    chart: {
        type: 'bar',
        zoomType:'xy',
        alignTicks:false,
        width:170,
        height:35,
        marginBottom:0,
        marginLeft:0,
        marginRight:0,
        marginTop:0,
        spaceBottom:0,
        spaceLeft:0,
        spaceRight:0,
        spaceTop:0,
        shadow:false
    },
    title: {
        text: ''
    },
    exporting : {
      enabled:false
    },    
    yAxis: {
        gridLineWidth: 0
    },
    legend: {
        enabled: false
    },
    credits: {
      enabled:false,
      href:"",
      text:""
    },
    plotOptions: {
        bar: {
          stacking:'percent',
          dataLabels: {
              enabled:true,
              useHTML: true, // 关键：开启HTML渲染模式
              style: {
                 textOutline: 'none'
              },
              formatter: function() {
                   // 修正对齐逻辑：匹配需求的系列占比
                   var alignText = (this.colorIndex == 2) ? 'left' : ((this.colorIndex == 1) ? 'center':'right');
                   // 用div设置100%宽度，让text-align生效
                   return '<div style="font-family:BentonSans Medium; font-weight:400; font-size: 9px; text-align:'+alignText+'; width:100%;">'+ Highcharts.numberFormat(this.percentage,0) +'% </div>';
              }
          }
        },
        series: {
            allowPointSelect: false,
            lineWidth:2,
            overlapWidth:'3px'
        }
    },
    series: [{
        name: 'EV',
        data: [20]
    }, {
        name: 'GAS',
        data: [50]
    }, {
        name: 'HYBRID',
        data: [30]
    }]
});
</script>

关键修改说明：

1. 给plotOptions.bar.dataLabels添加useHTML: true，启用HTML渲染才能让自定义样式生效
2. 将标签容器改为<div>并设置width:100%，确保元素占满所在条形的宽度，让text-align属性发挥作用
3. 调整colorIndex的判断逻辑，对应到需求中的各个系列占比
4. 移除series中重复的dataLabels配置，避免样式冲突

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