Highcharts solidgauge图表Tooltip文本水平居中问题求助

问题说明 #

我有2个SolidGauge图表，鼠标悬停时的提示文本（Tooltip）未实现水平居中：
理想显示效果：

first one
   50%

实际显示效果：

first one
50%

修复方案 #

问题根源在于：Tooltip容器的宽度由第一行文本（如first one）决定，第二行大字体的百分比文本无法在这个宽度内居中。

需要做两处修改：

• 在pointFormat的百分比span标签中添加display: block; text-align: center样式，让百分比文本作为块级元素单独居中。
• 调整positioner函数的x坐标计算逻辑，确保整个Tooltip容器基于图表宽度居中。

修改后的代码 #

JavaScript代码 #

Highcharts.chart('chart', {
    chart: {
        type: 'solidgauge',
        height: '110%',
        backgroundColor: 'rgba(0,0,0,0)',
    },
    title: {
        text: 'Title',
        style: {
            fontSize: '24px',
            textAlign: 'center'
        }
    },
    tooltip: {
        borderWidth: 0,
        backgroundColor: 'none',
        shadow: false,
        style: {
            fontSize: '16px',
            textAlign: 'center'
        },
        valueSuffix: '%',
        pointFormat: '{series.name}<br><span style="display:block; text-align:center; font-size:2em; color: {point.color}; font-weight: bold">{point.y}</span>',
        positioner: function () {
            return {
                x: this.chart.chartWidth / 2 - this.label.width / 2,
                y: (this.chart.plotHeight / 2) + 15
            };
        }
    },
    pane: {
        startAngle: 0,
        endAngle: 360,
        background: [{
            outerRadius: '112%',
            innerRadius: '88%',
            backgroundColor: 'rgba(0,0,0, 0.3)',
            borderWidth: 0
        }, {
            outerRadius: '87%',
            backgroundColor: 'rgba(50,0,10, 0.3)',
            borderWidth: 0
        }]
    },
    yAxis: {
        min: 0,
        max: 100,
        lineWidth: 0,
        tickPositions: []
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                enabled: false,
            },
            linecap: 'round',
            stickyTracking: false,
            rounded: true
        }
    },
    series: [{
        name: 'first one',
        data: [{
            color: 'rgba(0,0,0)',
            radius: '112%',
            innerRadius: '88%',
            y: 50,
        }]
    }, {
        name: 'second one',
        data: [{
            color: 'rgba(50,0,10)',
            radius: '87%',
            innerRadius: '63%',
            y: 80,
        }]
    }]
});

HTML代码 #

<div id="chart" style="width:500px;height:500px;margin:auto;"></div>

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