Reactjs 如何使工具提示跟随图表中的光标？

如何使工具提示跟随使用recharts制作的饼图中的光标

当前，将显示工具提示，但它只是停留在某个位置，直到光标直接移动到其中。我需要的是一个随光标移动的工具提示。我可以在一个特定的位置，可能在图表的顶部或任何地方

演示：

我需要径向条形图中显示的类似内容。 在此，工具提示将随光标一起移动

<PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>
  <Tooltip />
  <Pie
    data={data}
    cx={420}
    cy={200}
    startAngle={180}
    endAngle={0}
    cornerRadius={40}
    innerRadius={60}
    outerRadius={80}
    fill="#8884d8"
    paddingAngle={-15}
  >
    {data.map((entry, index) => (
      <Cell
        fill={
          index === 0 || index === data.length - 1
            ? COLORS[index % COLORS.length]
            : 'transparent'
        }
        stroke={
          index === 0 || index === data.length - 1
            ? COLORS[index % COLORS.length]
            : 'transparent'
        }
      />
    ))}
  </Pie>
  <Pie
    data={data}
    cx={420}
    cy={200}
    startAngle={180}
    endAngle={0}
    cornerRadius={0}
    innerRadius={60}
    outerRadius={80}
    fill="#8884d8"
  >
    {data.map((entry, index) => (
      <Cell
        fill={
          index === 0 || index === data.length - 1
            ? 'transparent'
            : COLORS[index % COLORS.length]
        }
        stroke={
          index === 0 || index === data.length - 1
            ? 'transparent'
            : COLORS[index % COLORS.length]
        }
      />
    ))}
  </Pie>
</PieChart>;

{data.map（（条目，索引）=>(
))}
{data.map（（条目，索引）=>(
))}
;

您可以在MouseMove上侦听

并更新
的左上偏移量。使用事件中提供的chartX和chartY重新填充工具提示包装器
元素

演示：

我添加了一个函数
onPieEnter
，如下所示：

onPieEnter(e){
    console.log(e);
    if(e){
      let toolTipWrapper = document.getElementsByClassName("recharts-tooltip-wrapper")[0];
      toolTipWrapper.style.transition = 'transform 400ms ease 0s';
      toolTipWrapper.style.transform = "translate("+ (e.chartX + 10) +"px, "+ (e.chartY + 10) +"px)";
    }
}

这个包裹可能对你有帮助。我会看看这个。谢谢sunilOne我有个问题sunil。角半径在饼图中的小部分似乎不起作用。您可以查看正在发生的情况，因为相应的部分看起来会扭曲，并且无法正常显示。只是个问题。是否可以使工具提示始终位于顶部？我的意思是在图表的顶端，我的意思是在光标的顶端。我改变了X和Y，它成功了。无论如何谢谢你。：）我的一个问题是，当我将屏幕上的宽度从800更改为500时，工具提示仅跟随蓝色部分上的光标。绿色和橙色部分没有遵循工具提示。我检查了控制台，在本例中，事件似乎返回为null。