在图表图例

时间:2017-04-02 11:23:05

标签: javascript reactjs recharts

我正在使用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);进行状态更新,则图例将更新,但是当您悬停时工具提示光标不会输出,因此您无法看到您正在轻松悬停的数据点。 / p>

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

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

0 个答案:

没有答案