如何让HighCharts雷达图xAxis分类文本居中对齐？

我尝试让xAxis分类文本居中对齐，曾通过多种方式设置text-align: center样式，但均未奏效，例如BBBBBB和100这类文本并未居中。请问是否有可行的居中方法？

图表配置代码如下：

{
    chart: {
        renderTo: 'container',
        polar: true,
        type: 'area',
        style: {
            fontFamily: 'SUIT'
        }
    },

    xAxis: {
        categories: [
            '<span style="text-align: center"><span style="color:#404040; font-size:16px; font-weight:500;">' +
                radarDataTitle[0] +
                '</span><br><span style="font-size:20px;color:#002d84; font-weight:700;">' +
                radarData[0] +
                '</span></span>',
            '<span style="color:#404040; font-size:16px; font-weight:500;">' +
                radarDataTitle[1] +
                '</span><br><span style="font-size:20px;color:#002d84; font-weight:700; text-align: center; width: 100%">' +
                radarData[1] +
                '</span>',
            '<span style="color:#404040; font-size:16px; font-weight:500;">' +
                radarDataTitle[2] +
                '</span><br><span style="font-size:20px;color:#002d84; font-weight:700;">&nbsp' +
                radarData[2] +
                '</span>',
            '<span style="opacity:0;">2</span><br><span style="color:#404040; font-size:16px; font-weight:500;">' +
                radarDataTitle[3] +
                '</span><br><span style="font-size:20px;color:#002d84; font-weight:700;">' +
                radarData[3] +
                '</span>',
            '<span style="color:#404040; font-size:16px; font-weight:500;">' +
                radarDataTitle[4] +
                '</span>&nbsp<br><span style="font-size:20px;color:#002d84; font-weight:700;">' +
                radarData[4] +
                '</span>',
            '<span style="color:#404040; font-size:16px; font-weight:500;">' +
                radarDataTitle[5] +
                '</span>&nbsp<br><span style="font-size:20px;color:#002d84; font-weight:700;">' +
                radarData[5] +
                '</span>'
        ],

        tickmarkPlacement: 'on',
        lineWidth: 0,
        labels: {
            distance: 30
        }
    },
    series: [
        {
            enableMouseTracking: false,
            data: radarData,
            pointPlacement: 'on',
            marker: {
                radius: 1
            }
        }
    ]
};

解决方法 #

Highcharts极坐标的X轴标签默认是行内元素，直接设置text-align: center不会生效，必须将标签转为块级元素才能触发对齐效果，以下两种方法都能解决问题：

方法1：统一配置标签样式

在xAxis.labels中添加全局样式，强制标签为块级元素并设置居中：

xAxis: {
    // 可简化categories里的冗余样式，无需每个标签单独设置text-align
    categories: [
        '<span style="color:#404040; font-size:16px; font-weight:500;">' + radarDataTitle[0] + '</span><br><span style="font-size:20px;color:#002d84; font-weight:700;">' + radarData[0] + '</span>',
        '<span style="color:#404040; font-size:16px; font-weight:500;">' + radarDataTitle[1] + '</span><br><span style="font-size:20px;color:#002d84; font-weight:700;">' + radarData[1] + '</span>',
        // 其他分类同理简化
    ],
    tickmarkPlacement: 'on',
    lineWidth: 0,
    labels: {
        distance: 30,
        style: {
            textAlign: 'center',
            display: 'block', // 核心：将行内标签转为块级元素
            width: '120px' // 可选：固定宽度让居中效果更明显
        }
    }
}

方法2：用formatter函数生成标签

如果需要更灵活的结构控制，可通过formatter函数构建带居中样式的标签：

xAxis: {
    categories: radarDataTitle, // 单独存放标题数据
    tickmarkPlacement: 'on',
    lineWidth: 0,
    labels: {
        distance: 30,
        formatter: function() {
            const index = this.pos;
            return `<div style="text-align:center;">
                <span style="color:#404040; font-size:16px; font-weight:500;">${this.value}</span><br>
                <span style="font-size:20px;color:#002d84; font-weight:700;">${radarData[index]}</span>
            </div>`;
        },
        useHTML: true // 必须开启，才能解析HTML标签
    }
}

另外注意：原代码中series被错误嵌套在xAxis内部，需调整到和xAxis同级，否则图表可能无法正常渲染。

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