求Highcharts Donut响应式布局下中心文字居中的解决方案

我之前也踩过这个坑，用title/subtitle的浮动方案确实在无固定宽度的响应式场景下会失效。分享两个亲测有效的方案，覆盖无需改源码和可扩展源码两种场景：

方案一：用Renderer动态绘制文本（无需修改源码） #

核心思路是利用Highcharts的rendererAPI手动创建文本元素，然后监听图表的redraw事件，每次图表缩放重绘时重新计算中心坐标并更新文本位置。

Highcharts.chart('container', {
    chart: {
        type: 'pie',
        events: {
            // 图表加载完成后创建文本
            load: function() {
                this.centerText = this.renderer.text('中心统计文本', 0, 0)
                    .css({
                        fontSize: '16px',
                        fontWeight: 'bold',
                        color: '#2c3e50'
                    })
                    .add();
                // 初始化位置
                this.updateCenterText();
            },
            // 响应式缩放时更新位置
            redraw: function() {
                this.updateCenterText();
            }
        }
    },
    plotOptions: {
        pie: {
            innerSize: '60%', // 甜甜圈内圈大小
            dataLabels: {
                enabled: false
            }
        }
    },
    series: [{
        data: [25, 30, 20, 25]
    }],
    // 自定义方法：计算并更新文本中心位置
    updateCenterText: function() {
        var chart = this;
        // 获取饼图的中心坐标（x,y）
        var pieCenter = chart.series[0].center;
        // 获取文本的实际宽度，用于水平居中
        var textWidth = chart.centerText.getBBox().width;
        
        chart.centerText.attr({
            x: pieCenter[0] - textWidth / 2, // 水平居中
            y: pieCenter[1] + 6 // 微调垂直位置，抵消文本基线偏移
        });
    }
});

这个方案的优势是完全适配响应式场景，不管图表怎么缩放，每次重绘都会自动校准文本位置，不需要依赖任何固定宽度设置。

方案二：扩展Highcharts Pie系列（可修改源码/封装复用） #

如果需要在多个图表中复用这个功能，可以扩展Highcharts的Pie系列原型，添加一个centerText配置项，让使用更简洁：

// 扩展Highcharts Pie系列，添加centerText配置支持
Highcharts.seriesTypes.pie.prototype.afterInit = function() {
    var series = this;
    var chart = series.chart;
    var centerTextOpts = series.options.centerText;

    if (centerTextOpts && centerTextOpts.text) {
        // 创建中心文本元素
        series.centerText = chart.renderer.text(centerTextOpts.text, 0, 0)
            .css(centerTextOpts.style || { fontSize: '16px', fontWeight: 'bold' })
            .add();

        // 监听重绘事件更新位置
        var updatePosition = function() {
            var pieCenter = series.center;
            var textWidth = series.centerText.getBBox().width;
            series.centerText.attr({
                x: pieCenter[0] - textWidth / 2,
                y: pieCenter[1] + (centerTextOpts.yOffset || 6)
            });
        };

        // 绑定到图表重绘事件
        if (!chart.events.redraw) chart.events.redraw = [];
        chart.events.redraw.push(updatePosition);
        
        // 初始化位置
        updatePosition();
    }
};

// 使用时直接配置centerText即可
Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    plotOptions: {
        pie: {
            innerSize: '60%',
            dataLabels: { enabled: false },
            centerText: {
                text: '总占比 100%',
                style: { fontSize: '18px', color: '#34495e' },
                yOffset: 4 // 自定义垂直偏移量
            }
        }
    },
    series: [{ data: [15, 25, 30, 30] }]
});

这种方式把中心文本功能封装成了Pie系列的原生配置项，后续使用时只需要在plotOptions.pie里添加centerText配置即可，代码更整洁，适合多图表复用场景。

注意事项 #

• 如果图表包含多个饼图系列，需要调整series[0].center中的索引值，指向目标甜甜圈系列。
• 文本的垂直偏移量可以根据字体大小微调，让视觉上更居中（因为文本默认基线是底部，需要向上偏移一点）。

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