如何使用图表获取折线图上的悬停元素 [英] How to get the hovered element on Line Chart using Recharts

问题描述

我实际上是新来的.而且是ReactJS的新功能:(

I am actually new here. And new in ReactJS too :(

我想做的是，当我将鼠标悬停在值1线上时，工具提示中只会显示值1数据.因此，如您所见，此工具提示并非如此.

What I'm trying to do is when I hover over the value 1 line, only the value 1 data will be shown inside the tooltip. So as you can see that's not the case with this tooltip.

请帮助我，我真的需要它.

Please help I really need it.

推荐答案

在每个Line元素上尝试此代码

Try this code on each Line element

activeDot={{onMouseOver:this.customMouseOver}}

创建一种处理方法

customMouseOver(e){
  return (
   <div className="customMouseOver">
     //e hold the line data in payload element
   </div>
  );
}

这篇关于如何使用图表获取折线图上的悬停元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！