如何在Ant Design旭日图提示框中展示额外数据字段？

你的问题出在tooltip formatter的参数使用错误。Ant Design Charts的Sunburst组件中，tooltip的formatter函数接收的不是单独的name、value、additionalValue参数，而是一个包含当前数据点完整信息的对象。

修正后的代码如下：

const data = [
  {
    name: 'Parent',
    children: [
      {
        name: 'Child 1',
        value: 100,
        additionalValue: 20
      },
      {
        name: 'Child 2',
        value: 60,
        additionalValue: 10
      },
      {
        name: 'Child 3',
        value: 30,
        additionalValue: 5
      }
    ]
  }
];

const tooltip = {
  // 接收完整的数据条目作为参数
  formatter: (item) => {
    // 父节点没有additionalValue，做个判断避免显示undefined
    const additionalContent = item.additionalValue ? 
      `<br/> Additional Value: ${item.additionalValue}` : '';
    return `Name: ${item.name} <br/> Value: ${item.value} ${additionalContent}`;
  }
};

const config3 = {
  data: data,
  innerRadius: 0.3,
  tooltip: tooltip,
  interactions: [
    {
      type: 'element-active',
    },
  ],
}

const SunburstPlot = () => {
  return <Sunburst {...config3} />;
};

关键改动说明 #

• 修改formatter的参数为item，这个对象包含当前 hover 到的节点的所有数据字段，包括你自定义的additionalValue。
• 增加了对父节点的判断，因为父对象没有additionalValue字段，避免提示框出现undefined。
• 保持其他配置不变，这样提示框就能同时展示value和additionalValue的内容了。

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