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

按照娜塔莎的答案，首先创建一个自定义工具提示：

<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道具添加到每个<Bar>元素：

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

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

Answer 2

您可以像此处的示例一样创建自定义工具提示：

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

创建自定义的工具提示后，可以在文档中的Bar组件的OnMouseOver属性中对其进行调用：

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

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

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

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

2 个答案: