如何在Highcharts中缩放饼图标题？修复初始加载居中小问题

问题描述 #

实现Highcharts饼图标题的动态字体缩放时，遇到以下问题：

• 首次加载页面时，标题的垂直居中效果不理想
• 调整屏幕尺寸后，标题显示恢复正常，推测原因是计算Y轴坐标时，标题的字体大小尚未完成更新

需求目标：

• 标题字体随饼图缩小而动态减小
• 标题尺寸不超过饼图内半径范围

解决方案 #

核心问题在于首次加载时Y坐标计算基于默认字体大小，而非动态设置后的字体尺寸。调整逻辑顺序，先设置字体大小，再基于标题实际高度计算居中坐标，同时优化HTML结构确保文字水平居中。

修改后的完整代码 #

JavaScript

var chart = Highcharts.chart('container', {
  chart: {
    type: 'pie',
    events: {
      load: function () {
        // 直接使用HTML结构，添加水平居中样式
        this.title.attr({
          text: `<div style="display: flex; flex-direction: column; align-items: center;">
                  <div>TEXT</div>
                  <div>label</div>
                </div>`
        });
      },
      render: function () {
        const plotInnerRadius = Math.min(this.plotHeight, this.plotWidth) / 2 * 0.6; // 取饼图内半径（innerSize为60%）
        let fontSize = Math.round(0.4 * plotInnerRadius); // 调整比例确保不超过内半径
        
        // 先设置字体大小，再获取标题实际高度
        this.title.css({fontSize: `${fontSize}px`});
        const titleHeight = this.title.element.offsetHeight;
        
        // 基于标题实际高度计算垂直居中Y坐标
        const y = this.plotTop + (this.plotHeight - titleHeight) / 2;
        this.title.attr({y});
      }
    }
  },
  title: {
    text: "",
    floating: true,
    useHTML: true,
    align: 'center' // 确保标题容器水平居中
  },
  plotOptions: {
    pie: {
      borderRadius: 0,
      slicedOffset: 0,
      size: "90%",
      innerSize: "60%"
    },
    series: {
      showInLegend: true
    }
  },
  xAxis: {visible: false},
  yAxis: {visible: false},
  series: [{
    name: 'Brands',
    data: [
      {name: 'Microsoft Internet Explorer', y: 56.33},
      {name: 'Chrome', y: 24.03, sliced: true, selected: true}
    ]
  }]
});

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; max-width: 600px; margin: 0 auto"></div>
<button id="update">Update</button>

关键修改点说明 #

1. 调整逻辑顺序：在render事件中先设置字体大小，再获取标题实际高度计算Y坐标，确保使用最新的字体尺寸计算位置
2. 基于内半径计算字号：直接使用饼图内半径（innerSize为60%）计算字体大小，保证标题不会超出内圆范围
3. 优化HTML结构：给标题容器添加align-items: center，确保内部文字水平居中；同时设置标题的align: 'center'，保证容器本身水平居中
4. 精准垂直居中计算：通过offsetHeight获取标题实际高度，计算垂直居中Y坐标，替代原有的估算偏移值

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