如何调整Highcharts solidgauge的标题与副标题匹配图表尺寸

核心问题原因 #

默认情况下，Highcharts的标题、副标题是基于整个容器居中定位，而非你自定义位置的Pane中心。要实现对齐，需要手动将标题/副标题的位置与Pane的center参数绑定。

方法1：动态渲染时自动对齐（推荐响应式场景） #

通过chart.render事件，每次图表渲染时计算Pane中心坐标，再调整标题/副标题的位置：

Highcharts.chart(highCtr, {
    chart: {
        type: 'solidgauge',
        marginTop: 10,
        height: 200,
        events: {
            render: function () {
                var chart = this;
                // 根据Pane的center参数计算中心坐标
                var paneCenterX = chart.plotLeft + (chart.plotWidth * 0.3);
                var paneCenterY = chart.plotTop + (chart.plotHeight * 0.65);

                // 调整标题位置（Pane上方中心）
                var title = chart.title;
                title.attr({
                    x: paneCenterX - (title.getBBox().width / 2),
                    y: 40 // 垂直位置可按需调整
                });

                // 调整副标题位置（Pane中心区域）
                var subtitle = chart.subtitle;
                subtitle.attr({
                    x: paneCenterX - (subtitle.getBBox().width / 2),
                    y: paneCenterY - (subtitle.getBBox().height / 2)
                });
            }
        }
    },
    credits: {
        enabled: false
    },
    title: {
        text: 'Level 1',
        align: 'center'
    },
    subtitle: {
        text: rawData +'%',
        style: {
            'font-size': '25px'
        },
        align: 'center',
        zIndex: 1
    },
    // 以下Pane、yAxis、Series配置保持原有内容不变
    pane: [{
        startAngle: -120,
        endAngle: 120,
        background: [{
            outerRadius: '100%',
            innerRadius: '80%',
            backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
            borderWidth: 0,
            shape: 'arc'
        }],
        size: '80%',
        center: ['30%', '65%']
    },{
        startAngle: -120,
        endAngle: 120,
        size: '80%',
        center: ['30%', '65%'],
        background: []
    }],
    yAxis: [{
        min: 0,
        max: 100,
        lineWidth: 2,
        lineColor: 'white',
        tickInterval: 10,
        labels: { enabled: false },
        minorTickWidth: 0,
        tickLength: 50,
        tickWidth: 5,
        tickColor: 'white',
        zIndex: 6,
        stops: [
            [0, '#f06'],[0.101, '#f03'],[0.201, '#e10'],[0.301, '#c30'],
            [0.401, '#a50'],[0.501, '#870'],[0.601, '#690'],[0.701, '#4b0'],
            [0.801, '#2d0'],[0.901, '#0f0'],[1, '#fff']
        ]
    },{
        linkedTo: 0,
        pane: 1,
        lineWidth: 5,
        lineColor: 'white',
        tickPositions: [],
        zIndex: 6
    }],
    series: [{
        animation: false,
        dataLabels: { enabled: false },
        point: {
            events: {
                mouseOver: function () {
                    var point = this, yAxis = point.series.yAxis, subtitle = yAxis.subtitle;
                    if (subtitle) {
                        subtitle.attr({ text: yAxis.axisTitle.textStr + ': ' + point.y });
                    }
                },
                mouseOut: function () {
                    var point = this, yAxis = point.series.yAxis, subtitle = yAxis.subtitle;
                    if (subtitle) { subtitle.attr({ text: '' }); }
                }
            }
        },
        borderWidth: 0,
        color: Highcharts.getOptions().colors[0],
        radius: '100%',
        innerRadius: '80%',
        data: data
    }]
});

方法2：静态坐标定位（适合固定尺寸图表） #

如果图表尺寸固定，可直接通过x/y属性硬编码位置，无需渲染事件：

title: {
    text: 'Level 1',
    align: 'center',
    x: 60, // 对应Pane 30%水平中心的偏移值
    y: 40
},
subtitle: {
    text: rawData +'%',
    style: { 'font-size': '25px' },
    align: 'center',
    x: 60,
    y: 130, // 对应Pane 65%垂直中心的偏移值
    zIndex: 1
}

关键注意事项 #

• 删除副标题配置中无效的center属性（该属性仅适用于Pane，不属于标题/副标题的配置项）
• plotLeft/plotWidth是图表绘图区域的偏移量和宽度，结合Pane的百分比中心可以精准计算坐标
• getBBox()用于获取文本元素的实际宽高，确保文本完全居中对齐

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