Recharts Line activeDot 函数会破坏工具提示？

Question

我正在尝试基于 Recharts 中 Line 的 activeDot 触发函数。

使用默认值true ，在图表上移动鼠标会显示默认工具提示、垂直突出显示的网格线，并且线上的点会按预期变大。

但是，假设我想使用来自 activeDot 的有效负载触发一个事件：

  activeDotHandler(data) {
    this.setState({ dotData: data }); // to be used in a different part of the webpage
  }

  render() {
    return (
      <LineChart ...>
        <XAxis ... />
        <YAxis ... />

        <Tooltip />

        <Line activeDot={this.activeDotHandler.bind(this)} ... />

      </LineChart>
    );
  }

这可行，但工具提示和突出显示的行不再像您拥有activeDot={true}时那样显示。

从函数返回true也不起作用。

我已经尝试过诸如activeDot={{ onMouseOver: this.activeDotHandler.bind(this) }}之类的东西，但是鼠标必须直接在点上方。

我只想要默认的工具提示和 activeDot 功能，并添加一个带有 activeDot 有效负载的事件。

任何想法我做错了什么？ 先感谢您！

编辑：我还尝试将onMouseOver添加到<LineChart>本身，这有助于给我一个包含活动点有效负载的事件。 但是，这仍然会禁用默认的工具提示/突出显示的网格/活动点样式。

编辑 2 ：还尝试在this.setState()之后返回<circle> 。 还是一样的问题。

Answer 1

带有自定义工具提示的 Recharts Line activeDot 函数

看看这里！

https://codesandbox.io/embed/recharts-issue-activedot-forked-k8norr?fontsize=14&hidenavigation=1&theme=dark