如何实现Highcharts环形图副标题始终居中于图表（动态适配尺寸）？

默认情况下，Highcharts的subtitle是基于容器div定位的，即使设置align: 'center'和verticalAlign: 'middle'，也只会对齐容器而非环形图的绘图区中心。要实现动态适配的中心定位，可通过以下两种方案解决：

方案一：动态调整原生subtitle的位置 #

利用图表的load和redraw事件，实时计算绘图区（plotArea）的中心坐标，再调整subtitle的位置：

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    innerSize: '60%', // 环形图内半径
    events: {
      load: function() {
        this.setSubtitlePosition();
      },
      redraw: function() {
        this.setSubtitlePosition();
      }
    }
  },
  subtitle: {
    text: '环形中心副标题',
    floating: true,
    align: 'left', // 先设为基础定位，后续通过attr动态调整
    verticalAlign: 'top',
    style: {
      fontSize: '16px',
      fontWeight: 'bold'
    }
  },
  plotOptions: {
    pie: {
      center: ['50%', '50%'] // 确保环形图本身在绘图区居中
    }
  },
  series: [{
    data: [['分类A', 35], ['分类B', 25], ['分类C', 40]]
  }]
});

// 给Highcharts图表实例添加自定义定位方法
Highcharts.Chart.prototype.setSubtitlePosition = function() {
  const plotArea = this.plotBox;
  const subtitle = this.subtitle;
  
  if (plotArea && subtitle) {
    // 计算绘图区中心坐标
    const centerX = plotArea.left + plotArea.width / 2;
    const centerY = plotArea.top + plotArea.height / 2;
    // 根据副标题自身宽高偏移，使其中心与绘图区中心重合
    subtitle.attr({
      x: centerX - subtitle.getBBox().width / 2,
      y: centerY - subtitle.getBBox().height / 2
    });
  }
};

关键说明： #

• load事件处理初次加载时的定位，redraw事件处理窗口 resize、数据更新等动态场景
• plotBox是图表绘图区的边界信息，包含left、top、width、height属性
• 通过subtitle.getBBox()获取副标题的实际尺寸，确保偏移后完全居中

方案二：用Renderer自定义中心文本 #

如果不需要原生subtitle的其他特性，可直接用Highcharts的renderer在绘图区中心绘制文本，更灵活：

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    innerSize: '60%',
    events: {
      load: function() {
        this.drawCenterText();
      },
      redraw: function() {
        // 重绘前销毁旧文本，避免重复渲染
        if (this.centerText) this.centerText.destroy();
        this.drawCenterText();
      }
    }
  },
  plotOptions: {
    pie: {
      center: ['50%', '50%']
    }
  },
  series: [{
    data: [['分类A', 35], ['分类B', 25], ['分类C', 40]]
  }]
});

// 自定义绘制中心文本的方法
Highcharts.Chart.prototype.drawCenterText = function() {
  const plotArea = this.plotBox;
  const centerX = plotArea.left + plotArea.width / 2;
  const centerY = plotArea.top + plotArea.height / 2;
  
  this.centerText = this.renderer.text('环形中心文本', centerX, centerY)
    .attr({
      align: 'center',
      verticalAlign: 'middle'
    })
    .css({
      fontSize: '16px',
      fontWeight: 'bold',
      color: '#333'
    })
    .add();
};

关键说明： #

• renderer.text()直接在SVG层绘制文本，定位更精准
• 重绘时需销毁旧文本，避免多次渲染导致的重叠问题

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