Событие click-google-charts не работает

Question

Согласно документации , вы можете Set the chart-specific events you want to listen to and the corresponding callback. В данном примере используется select, который работает нормально (я настроил пример здесь . Проблема возникает, когда я попробуйте использовать любой другой тип диаграммы.

Из документации Google Charts для гистограммы я должен использовать событие нажатия:

Когда я добавляю событие щелчка вот так:

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

Ничего не происходит, но событие выбора все еще работает. Я настроил кодовую песочницу здесь , чтобы продемонстрировать это поведение. Это также происходит для animationfinish , onmouseover и всех других событий, которые я проверял.

Answer 1

Похоже, rakannimer уже ответил на это в # 263 в репозитории GitHub , но решил, что я все равно отвечу на это, если у кого-то еще будет это вопрос.

Поскольку этот ответ о переполнении стека отлично объясняет, событие 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 });
        });
      }
    }
  ]}
/>