Recharts 树形图工具提示标签

【问题标题】：Recharts Treemap Tooltip labelRecharts 树形图工具提示标签
【发布时间】：2021-08-02 07:38:12
【问题描述】：

使用<Tooltip/> 创建TreeMap 时，如何在工具提示中获得标签？

我只收到像 : 5738 这样的工具提示

在树形图中，名称会正确显示。

当我从代码和框中的 rechart 文档中打开 example 并添加工具提示时，我的行为相同。

我也玩过自定义工具提示，但无法正常工作。

【问题讨论】：

标签： reactjs recharts

【解决方案1】：

我必须制作一个自定义工具提示才能使其正常工作。

这也会将单元格的名称（根名称）放在工具提示中。

const CustomTooltip = ({ active, payload, label }) => {
  
  if (active && payload && payload.length) {
    return (
      <div className="treemap-custom-tooltip">
        <p>{`${payload[0].payload.root.name}`}</p>
        <p>{`${payload[0].payload.name} : ${payload[0].value}`}</p>
      </div>
    );
  }

  return null;
};



<Treemap
        width={400}
        height={400}
        aspectRatio={4 / 3}
        data={formattedData}
        dataKey="size"
        stroke="#fff"
        fill="#8884d8"
      >
        <Tooltip content={<CustomTooltip />}/>
</Treemap>

【讨论】：