Rechart - 由三个条组成的条形图中每个条的工具提示

Question

我的条形图中有三个不同的条形。
我希望条形图中的每个条形都有一个工具提示，而不仅仅是三个。

import React from "react";
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from "Recharts";
const data = [
      {name: 'Page A', uv: 4000, pv: 1982, amt: 2400},
      {name: 'Page B', uv: 3000, pv: 1398, amt: 4739},
      {name: 'Page C', uv: 2000, pv: 9800, amt: 9056},
      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
      {name: 'Page E', uv: 1890, pv: 4678, amt: 2181},
      {name: 'Page F', uv: 2390, pv: 3800, amt: 2873},
      {name: 'Page G', uv: 3490, pv: 1987, amt: 2100},
];
class SimpleBarChart extends React.Component{
    render () {
    return (
        <BarChart width={600} height={300} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <CartesianGrid strokeDasharray="3 3"/>
       <XAxis dataKey="name"/>
       <YAxis/>
       <Tooltip />
       <Legend />
       <Bar dataKey="pv" barSize={20} fill="#8884d8" />
       <Bar dataKey="amt" barSize={20} fill="#82ca9d" />
       <Bar dataKey="uv" barSize={20} fill="#ffc658" />
      </BarChart>
    );
  }
}
export default SimpleBarChart;

Answer 1

按照 Natasha 的回答，首先创建一个自定义工具提示：

<Tooltip content={<CustomTooltip/>} />

添加一个函数/组件来呈现自定义内容。该变量tooltip用于标识悬停在哪个 Bar 上。可以使用payload包含选择中所有栏的 来自定义内容。

var tooltip
const CustomTooltip = ({ active, payload }) => {
    if (!active || !tooltip)    return null
    for (const bar of payload)
        if (bar.dataKey === tooltip)
            return <div>{ bar.name }<br/>{ bar.value.toFixed(2) }</div>
    return null
}

最后，为每个元素添加name和onMouseOverprops <Bar>：

<Bar dataKey="pv" barSize={20} fill="#8884d8"
     name="Name" onMouseOver={ () => tooltip="pv" } />

当鼠标悬停在它<Bar>上面时，它会将工具提示变量设置为值“pv”。然后CustomTooltip将在payload参数中找到该条目并显示名称和值。

Answer 2

您可以将共享= {false}道具添加到工具提示中，如下所示：

<Tooltip shared={false} />

Answer 3

您可以创建自定义工具提示，如此处的示例所示：

http://recharts.org/en-US/examples/CustomContentOfTooltip <---- 自定义工具提示示例（来自 recharts 文档）

创建自定义工具提示后，您可以在 Bar 组件的 OnMouseOver 属性中调用它，该属性位于此处的文档中：

http://recharts.org/en-US/api/Bar#onMouseOver <---- OnMouseOver

您还可以使用 OnMouseEnter 和 OnMouseLeave 但我知道这并不适合所有人。

您可能想要创建一个函数，当鼠标悬停在栏上时显示工具提示，并在鼠标停止悬停在栏上时隐藏工具提示。