1

我正在尝试基于 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：还尝试返回<circle>after this.setState()。还是一样的问题。

4

0 回答 0