如何在Ant Design环形饼图中设置自定义中心标签？

问题描述 #

我在应用中使用Ant Design环形饼图，配置代码如下：

const chartData = packArray.map(pack => ({
      type: pack.name,
      value: pack.quantity,
    }));

const config = {
  data: chartData,
  angleField: 'value',
  colorField: 'type',
  innerRadius: 0.5,
  radius: 1,
  label: {
    type: 'inner',
    offset: '-30%',
    content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
    style: {
      fontSize: 14,
      textAlign: 'center',
    },
  },
  interactions: [
    {
      type: 'element-active',
    },
  ],
};

图表的value字段对应各产品销量，总销量为26。默认情况下图表中心会显示未配置的“Total 26”文本，我希望替换成自定义内容。但修改label.content会改变所有扇区标签，无法单独修改中心文本，请问怎么实现？

解决方案 #

要单独自定义环形饼图的中心文本，需使用**annotation（标注）**功能，而非修改扇区的label配置，具体步骤如下：

• 关闭默认中心总计文本：在config中添加statistic: false，禁用系统默认生成的统计文本。
• 添加自定义中心标注：通过annotations配置项，用text类型的标注实现自定义中心内容。

修改后的完整配置代码：

const packAmountTotal = 26; // 你的总销量或自定义数值
const chartData = packArray.map(pack => ({
      type: pack.name,
      value: pack.quantity,
    }));

const config = {
  data: chartData,
  angleField: 'value',
  colorField: 'type',
  innerRadius: 0.5,
  radius: 1,
  // 禁用默认中心总计文本
  statistic: false,
  label: {
    type: 'inner',
    offset: '-30%',
    content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
    style: {
      fontSize: 14,
      textAlign: 'center',
    },
  },
  interactions: [
    {
      type: 'element-active',
    },
  ],
  // 自定义中心文本标注
  annotations: [
    {
      type: 'text',
      position: ['50%', '50%'], // 居中定位
      content: `Total: ${packAmountTotal}€`, // 自定义内容
      style: {
        fontSize: 16,
        fontWeight: 'bold',
        textAlign: 'center',
      },
      offsetY: 0, // 可按需调整垂直偏移量
    },
  ],
};

说明 #

• statistic: false：避免默认中心文本与自定义标注重复显示。
• annotations的text标注：通过position将文本固定在图表中心，content设置自定义内容，style可调整字体大小、粗细等样式，完全独立于扇区标签配置。

这样就能实现仅修改中心文本，同时保留扇区原有标签的效果。

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