如何使工具提示跟随 Piechart 中的光标？

Question

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

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

我需要在径向条形图中显示的类似内容。http://recharts.org/en-US/api/RadialBarChart 这里工具提示随着光标移动。

<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>;

Answer 1

您可以侦听 onMouseMove 并使用事件中提供的 chartX 和 chartY 更新 .recharts-tooltip-wrapper 元素的左上偏移量。

演示：jsfiddle link

我添加了一个函数 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)";
    }
}

如何使工具提示跟随 Piechart 中的光标？

How to make the tooltip follow the cursor in Piechart?

reactjs

recharts