react-google-charts点击事件不起作用

Posted 2021-04-09

According to the documentation，你可以Set the chart-specific events you want to listen to and the corresponding callback.这个例子是使用select工作正常（我设置了一个例子here。当我尝试使用任何其他图表类型时问题来了。

从谷歌图表文档，对于bar chart，我应该能够使用点击事件：

当我添加这样的点击事件时：

  {
    eventName: "click",
    callback({}) {
      console.log("clicked");
    }
  }

什么都没发生，但select事件仍然有效。我已经设置了一个代码沙箱here来演示这种行为。这也适用于animationfinish，onmouseover以及我检查过的所有其他事件。

答案

看起来rakannimer已经在#263的GitHub repository上回答了这个问题，但是我觉得无论如何我都会回答这个问题以防其他人遇到这个问题。

由于this堆栈溢出答案在解释方面做得非常好，因此必须触发ready事件才能触发图表事件（如屏幕截图中的那些事件）。因此，如果要使用任何其他事件，则必须在this之类的回调中启动它们：

<Chart
  chartType="ScatterChart"
  width="80%"
  height="400px"
  data={data}
  options={options}
  legendToggle
  chartEvents={[
    {
      eventName: "ready",
      callback: ({ chartWrapper, google }) => {
        const chart = chartWrapper.getChart();
        google.visualization.events.addListener(chart, "onmouseover", e => {
          const { row, column } = e;
          console.warn("MOUSE OVER ", { row, column });
        });
        google.visualization.events.addListener(chart, "onmouseout", e => {
          const { row, column } = e;
          console.warn("MOUSE OUT ", { row, column });
        });
      }
    }
  ]}
/>