如何在HighCharts饼图/环形图中实现标题在环形内部垂直居中

解决方法 #

默认Highcharts标题的verticalAlign属性定位基准是整个图表画布（包含图例、内边距区域），所以数据变多图例撑开高度后，整体画布的中心会偏移，自然会和扇区重叠。要实现标题仅在环形内部居中，可以用以下两种方案：

方案1：手动固定标题与饼图位置（推荐，配置简单）

提前固定环形的大小和中心坐标，再对应调整标题的偏移量，不受图例变化影响，配置示例如下：

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    // 可选：固定画布边距，避免图例挤压饼图空间
    margin: [30, 20, 30, 20]
  },
  title: {
    text: '中心展示标题',
    align: 'center',
    // 不使用verticalAlign，手动调整y轴偏移对齐环形中心
    y: 0,
    style: {
      fontSize: '20px',
      zIndex: 999 // 避免被扇区遮挡
    }
  },
  plotOptions: {
    pie: {
      // 固定环形中心、总大小、内环大小
      center: ['50%', '50%'],
      size: '70%',
      innerSize: '50%',
      // 关闭自动调整饼图位置的逻辑
      centerInCategory: true
    }
  },
  series: [{
    name: '访问来源',
    data: [
      ['直接访问', 20],
      ['邮件营销', 15],
      ['联盟广告', 25],
      ['视频广告', 30],
      ['搜索引擎', 10]
    ]
  }]
})

如果标题有轻微位置偏差，可微调title.y参数：数值为正向下偏移，为负向上偏移。

方案2：动态渲染中心文本（适配动态尺寸场景）

如果饼图尺寸会动态变化，可以在图表渲染钩子中获取环形实际中心坐标，自定义绘制文本，完全贴合环形中心：

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    events: {
      render: function() {
        const chart = this
        // 重绘时销毁旧文本避免重复
        if (chart.customTitle) chart.customTitle.destroy()
        // 获取环形实际中心坐标
        const pieCenter = chart.series[0].center
        const centerX = pieCenter[0] + chart.plotLeft
        const centerY = pieCenter[1] + chart.plotTop
        // 渲染自定义标题
        chart.customTitle = chart.renderer.text('动态中心标题', centerX, centerY)
          .css({
            fontSize: '18px',
            color: '#333',
            fontWeight: 'bold'
          })
          .attr({
            align: 'center',
            zIndex: 999
          })
          .add()
      }
    }
  },
  // 隐藏原生标题
  title: { text: '' },
  plotOptions: {
    pie: {
      innerSize: '50%'
    }
  },
  series: [{
    data: [/* 你的动态数据 */]
  }]
})

问题重叠场景示例：

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