React-Google-Charts 点击事件不起作用

Question

根据文档，您可以Set the chart-specific events you want to listen to and the corresponding callback.使用给出的示例，效果很好（我在这里select设置了一个示例。当我尝试使用任何其他图表类型时，问题就出现了。

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

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

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

什么也没发生，但 select 事件仍然有效。我在这里设置了一个代码沙箱来演示这种行为。对于animationfinish、onmouseover以及我检查过的所有其他事件，也会发生这种情况。

Answer 1

看起来rakannimer已经在GitHub 存储库的#263中回答了这个问题，但我想无论如何我都会回答这个问题，以防其他人遇到这个问题。

由于这个堆栈溢出答案做了很好的解释，因此ready必须在触发图表事件（如屏幕截图中的事件）之前触发该事件。因此，如果您想使用任何其他事件，则必须在回调中启动它们，如下所示：

<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 });
        });
      }
    }
  ]}
/>