如何在Nivo Pie Charts中正确配置原生tooltip展示ID与Value

你当前配置失效核心是3个写法错误，且不需要开发自定义Tooltip组件，用原生能力即可实现ID、Value的展示需求：

• JSX属性赋值语法错误：组件标签内传参不能用对象的冒号:写法，必须遵循属性名={属性值}的JSX语法
• 模板字符串语法错误：你写的插值表达式缺少外层反引号`包裹，属于无效JS代码
• 属性误用+取值路径错误：tooltip属性是用来完全替换整个Tooltip组件的（属于自定义开发范畴），且回调入参不存在t.response嵌套层级，无需使用该属性。

方案1：零配置使用原生默认Tooltip #

Nivo Pie的原生Tooltip默认就会展示扇区对应的ID和Value值，只要你的数据符合格式要求，直接删掉错误的tooltip配置行即可正常展示：

数据格式要求：传入的response数组每一项必须包含唯一的id字段、数值类型的value字段；如果你的数据字段名不匹配，比如是statusId、count，只要添加idKey="statusId"、valueKey="count"做字段映射即可，原生Tooltip会自动读取对应字段展示。

修正后完整代码：

export default function ResponseStatusChart() {
  return (
    <Container>
      <Pie
        data={response}
        width={700}
        height={700}
        borderWidth={0.5}
        innerRadius={0.5}
        padAngle={3}
        cornerRadius={40}
        colors={{ scheme: "blues" }}
        enableArcLabels={false}
        isInteractive={true}
        enableArcLinkLabels={false}
        legends={legendsProps}
        borderColor="#c2d9ff"
      />
    </Container>
  );
}

方案2：用原生配置自定义Tooltip文本格式 #

如果你需要把Tooltip文本改成「ID - Value」的拼接形式，同时保留原生Tooltip的样式、色块、交互等默认能力，不需要重写Tooltip组件，只要用原生提供的tooltipFormat配置即可：

export default function ResponseStatusChart() {
  return (
    <Container>
      <Pie
        data={response}
        width={700}
        height={700}
        // 仅修改tooltip展示文本，完全保留原生tooltip结构
        tooltipFormat={(value, arcData) => `${arcData.id} - ${value}`}
        borderWidth={0.5}
        innerRadius={0.5}
        padAngle={3}
        cornerRadius={40}
        colors={{ scheme: "blues" }}
        enableArcLabels={false}
        isInteractive={true}
        enableArcLinkLabels={false}
        legends={legendsProps}
        borderColor="#c2d9ff"
      />
    </Container>
  );
}

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