无法在 rechart 的自定义工具提示中呈现数据

Question

我正在尝试在鼠标悬停在容器顶部时呈现容器的工具提示。

很多灵感来自于此post：

所以我设置我的代码如下：


let [barGraphData, setBarGraphData] = useState({})

    let tooltip;
    const CustomTooltip = ({ active, payload }) => {
        if (!active || !tooltip)    return null
        for (const bar of payload)
            if (bar.dataKey === tooltip)
                return <div>{ `Team: ${bar.name}` }<br/>{ `Members: ${bar.value.toFixed(0)}`}</div>
        return null
    }

我的条形图是这样的：

<ResponsiveContainer width={'100%'} height={'100%'}>
        <BarChart width={600} height={300} data={data} margin={{top: 60, right: 20, bottom: 5, left: 0}}>
            <XAxis dataKey={'Date_Posted'}
                   tickFormatter={monthTickFormatter}/>

            <XAxis
                dataKey={'Date_Posted'}
                axisLine={false}
                tickLine={false}
                interval={0}
                tick={renderQuarterTick}
                height={1}
                scale="band"
                xAxisId="quarter"
            />
            {teams.map((team) => (
                // eslint-disable-next-line react/jsx-key
                <Bar dataKey={team} fill={'#38bdf8'}


                      onMouseOver={(data) =>{
                          setBarGraphData(data);
                          tooltip = team;
                      }}
                />

            ))}

            <CartesianGrid stroke="#ccc" />

            <YAxis />

            <Tooltip  content={CustomTooltip}
                      cursor={false}
                      wrapperStyle={
                          {
                              border: "2px solid #fda4af",
                              borderRadius: "5px",
                              backgroundColor: "white",
                              boxShadow: "0px 0px 5px #e5e7eb",
                              paddingLeft: 10,
                              paddingRight: 10,
                      }}
                      // position={{x: 0, y:0}}
                      position={{ x: barGraphData.x, y: barGraphData.y - 40 }}

            />

        </BarChart>


    </ResponsiveContainer>

现在我运行遇到的问题是我相信这里的代码块：

            {teams.map((team) => (
                // eslint-disable-next-line react/jsx-key
                <Bar dataKey={team} fill={'#38bdf8'}


                      onMouseOver={(data) =>{
                          setBarGraphData(data);
                          tooltip = team;
                      }}
                />

通过将此处的状态设置为 Bar 的数据，它会停止呈现我的工具提示。所以，当我传入该代码块时，我得到的是： example of the issue

但是当我传入以下代码时，我得到了呈现的工具提示，但是因为我没有传入数据对象，所以工具提示不会呈现在每个单独的栏上方。

{teams.map((team) => (
                // eslint-disable-next-line react/jsx-key
                <Bar dataKey={team} fill={'#38bdf8'}


                      onMouseOver={() =>{
                        
                          tooltip = team;
                      }}
                />

image of the tooltip rendered but unable to follow the mouseOver event

我在这里做错了什么？因为对我来说，状态似乎是搞乱工具提示渲染的东西。

Answer 1

“让工具提示”行在每个渲染中将工具提示设置为未定义。将工具提示设置为状态，应该这样做。

无法在 rechart 的自定义工具提示中呈现数据

Trouble rendering data in custom tooltip in rechart

javascript

recharts