如何在HighchartsJS的环形图（Donut Chart）中心添加自定义文本？

问题出在代码中重复定义了chart配置项：原代码先设置chart: {type: 'pie'}，后续又单独声明chart: {events: {...}}，这会导致后一个chart对象覆盖前一个，丢失type: 'pie'配置，图表因此默认渲染为折线图。

修正后的代码如下，将chart配置合并为一个对象，同时确保环形图与中心文本功能正常：

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    events: {
      render: function() {
        var chart = this,
          center = chart.series[0].center,
          renderer = chart.renderer,
          text;

        // 避免重复创建文本元素
        if (!chart.customText) {
          text = renderer.text(
            '自定义中心文本',
            center[0],
            center[1]
          ).attr({
            align: 'center',
            verticalAlign: 'middle',
            style: {
              fontSize: '20px',
              fontWeight: 'bold',
              color: '#000000'
            }
          }).add();
          chart.customText = text;
        } else {
          // 图表重绘时更新文本位置，适配窗口resize场景
          text.attr({
            x: center[0],
            y: center[1]
          });
        }
      }
    }
  },
  title: {
    text: '带中心自定义文本的环形图'
  },
  plotOptions: {
    pie: {
      innerSize: '50%', // 确保生成环形图
      dataLabels: {
        enabled: false
      }
    }
  },
  series: [{
    name: '浏览器占比',
    colorByPoint: true,
    data: [{
      name: 'Chrome',
      y: 61.41,
      color: '#FF0000'
    }, {
      name: 'Firefox',
      y: 11.84,
      color: '#00FF00'
    }, {
      name: 'Internet Explorer',
      y: 10.85,
      color: '#0000FF'
    }, {
      name: 'Safari',
      y: 4.67,
      color: '#FFFF00'
    }, {
      name: 'Edge',
      y: 4.18,
      color: '#FF00FF'
    }, {
      name: 'Other',
      y: 7.05,
      color: '#00FFFF'
    }]
  }]
});

关键修正说明： #

• 合并chart配置项，将type: 'pie'与events放在同一对象中，避免配置被覆盖
• 增加图表重绘时的文本位置更新逻辑，保证窗口尺寸变化时文本始终处于环形中心
• 调整文本内容为中文示例，贴合实际使用场景

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