1

我正在使用 React Recharts 包，我试图在图例中显示工具提示数据，而不是在鼠标光标周围悬停的工具提示。

我已经使用处理程序设置了一些自定义 Tolltip 内容，以将工具提示有效负载传递回 Legend 组件。当鼠标悬停在图表数据点上时，我想用工具提示数据进行更新。

我已经为工具提示内容设置了一个自定义工具提示反应元素，如下所示：

<Tooltip isAnimationActive={false} content={<CustomTooltip handler={this.handler} />} />

处理函数设置如下：

handler(payload) {

var payload = [
  payload[0]["value"],
  payload[1]["value"],
  payload[2]["value"]
];

this.props.tooltipPayload = payload;
//this.setState(this.state);
},

//this.setState(this.state);注释掉时，当您将鼠标悬停在图表数据点上时，工具提示将在图表内显示工具提示光标。但是，在这种情况下它不会更新反应状态，因为图表不会再次呈现。

您可以在http://jsfiddle.net/elronalds/1zwxh3bm/5/看到图表工具提示正常工作，但图例未更新

如果在处理程序中强制进行状态更新，this.setState(this.state);则图例将更新，但工具提示光标不会在您悬停时输出，因此您无法轻松查看悬停在哪些数据点上。

您可以在http://jsfiddle.net/elronalds/1zwxh3bm/6/上看到图表图例更新，但悬停数据点时不显示工具提示光标。

我的处理程序是否有问题CustomTooltip或者我如何更新 React 状态？我是 React 新手，所以我不确定这里发生了什么。

4

0 回答 0