如何在Highcharts非堆叠双列系列中右对齐x轴标签

针对非堆叠（stacking: 'normal'）双列系列的x轴标签，要让标签从两个柱子的中间位置（对应你提到的红色标记）开始右对齐，你之前用绝对定位的方式会脱离Highcharts的布局体系，导致无法精准对齐。下面是正确的实现方案：

核心修改点 #

• 移除formatter里的绝对定位HTML结构，改用Highcharts内置的标签定位属性
• 设置align: 'right'让标签右对齐
• 通过x属性调整标签的水平偏移，使其对齐到两个柱子的中间位置

完整代码示例 #

xAxis: {
    categories: ['分类1', '分类2', '分类3'],
    min: 0,
    labels: {
        useHTML: true,
        align: 'right', // 设置标签右对齐
        x: 15, // 偏移量，根据柱子宽度调整，确保对齐到两柱中间
        allowOverlap: false,
        style: {
            color: '#000000',
            fontSize: 'small'
        }
    }
}

动态适配补充（可选） #

如果你的柱子宽度是动态变化的，可以通过图表加载事件计算精准偏移量：

chart: {
    events: {
        load: function() {
            var xAxis = this.xAxis[0];
            // 获取第一个系列柱子的宽度
            var columnWidth = this.series[0].points[0].shapeArgs.width;
            // 偏移量设为柱子宽度的一半，精准对齐两柱中间
            xAxis.update({
                labels: {
                    x: columnWidth / 2
                }
            });
        }
    }
}

这种方式能适配不同的柱子宽度，确保标签始终对齐到预期位置。

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