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

【问题标题】：react-google-charts click event not workingreact-google-charts 点击事件不起作用
【发布时间】：2019-04-19 14:43:12
【问题描述】：

According to the documentation，你可以Set the chart-specific events you want to listen to and the corresponding callback. 给出的示例使用select 工作正常（我已经设置了一个示例here。当我尝试使用 any 时出现问题其他图表类型。

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

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

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

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

【问题讨论】：

标签： reactjs google-visualization

【解决方案1】：

看起来rakannimer 已经在GitHub repository 上的#263 中回答了这个问题，但我想我还是会回答这个问题，以防其他人遇到这个问题。

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

【讨论】：

如果您的图表有可能多次“准备好”，请确保避免多次添加鼠标事件侦听器。
这在添加点击事件时不起作用。有什么建议吗？
@jakeSylvestre 可以请你帮我看看如何将 click eb=vent 附加到我的水平标签stackoverflow.com/questions/60629886/…
嘿，如果可以的话，请帮帮我

【解决方案2】：

请查看以下代码 sn-p 添加点击事件：

import * as React from "react";
import { Chart } from "react-google-charts";

const chartEvents = [
      {
        callback: ({ chartWrapper, google }) => {
          const chart = chartWrapper.getChart();
          chart.container.addEventListener("click", (ev) => console.log(ev))
        },
        eventName: "ready"
      }
    ];

const data = [
  ["age", "weight"],
  [8, 12],
  [4, 5.5],
  [11, 14],
  [4, 5],
  [3, 3.5],
  [6.5, 7]
];

const options = {
  title: "Age vs. Weight comparison",
  hAxis: { title: "Age", viewWindow: { min: 0, max: 15 } },
  vAxis: { title: "Weight", viewWindow: { min: 0, max: 15 } },
  legend: "none"
};
const ExampleChart = () => {
  return (
    <Chart
      chartType="ScatterChart"
      data={data}
      options={options}
      graphID="ScatterChart"
      width="100%"
      height="400px"
      chartEvents={chartEvents}
    />
  );
};

export default ExampleChart;

【讨论】：

【解决方案3】：

除了@jake 提供的解决方案，chartWrapper 在回调事件中不再可用。就我而言，将其替换为 wrapper 可以。喜欢

<Chart
  chartType="ScatterChart"
  width="80%"
  height="400px"
  data={data}
  options={options}
  legendToggle
  chartEvents={[
    {
      eventName: "ready",
      callback: ({ wrapper, 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 });
        });
      }
    }
  ]}
/>```

【讨论】：