饼图中心添加文本：Highcharts 11版本原有代码失效求助

问题原因 #

Highcharts 11重构了渲染器（Renderer）的API实现，renderer.fontMetrics方法现在必须依赖已挂载到DOM的元素才能正常执行。旧版本中直接调用this.renderer.fontMetrics的逻辑，在新版本里会因缺少有效DOM元素关联，触发getComputedStyle的类型错误。

修复方案 #

以下两种方式均可解决该问题：

方案1：使用全局工具方法Highcharts.getFontMetrics

直接调用Highcharts提供的独立工具方法，传入字体样式参数即可获取度量，无需依赖renderer实例：

// 替换原this.renderer.fontMetrics调用
var metrics = Highcharts.getFontMetrics({
    fontSize: '20px', // 自定义字体大小
    fontFamily: 'Arial, sans-serif' // 自定义字体族
});

方案2：创建临时隐藏文本元素获取度量

若需保留基于renderer的调用逻辑，可先创建一个临时隐藏文本元素，通过它来获取字体度量：

// 创建临时隐藏文本元素
var tempText = this.renderer.text('', 0, 0).attr({
    style: 'font-size:20px;font-family:Arial,sans-serif;visibility:hidden'
}).add();

// 通过临时元素获取字体度量
var metrics = tempText.fontMetrics();

// 用完销毁临时元素，避免DOM冗余
tempText.destroy();

场景适配示例 #

针对饼图中心添加文本的场景，将原代码中获取字体宽度的部分替换为上述方案即可。比如原代码片段：

var centerX = chart.plotLeft + chart.plotWidth / 2;
var centerY = chart.plotTop + chart.plotHeight / 2;
var text = '中心文本';
var metrics = chart.renderer.fontMetrics('20px Arial');
var textWidth = metrics.width;

chart.renderer.text(text, centerX - textWidth / 2, centerY)
    .attr({ style: 'font-size:20px;font-family:Arial' })
    .add();

替换为方案1后的代码：

var centerX = chart.plotLeft + chart.plotWidth / 2;
var centerY = chart.plotTop + chart.plotHeight / 2;
var text = '中心文本';
var metrics = Highcharts.getFontMetrics({
    fontSize: '20px',
    fontFamily: 'Arial'
});
var textWidth = metrics.width;

chart.renderer.text(text, centerX - textWidth / 2, centerY)
    .attr({ style: 'font-size:20px;font-family:Arial' })
    .add();

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