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和 onMouseOver每个 Prop <Bar>元素:

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

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