如何使 react-google Chart 标签可点击

Question

我正在研究 react google-chart react-google-chart并且工作正常。我想要做的是将点击事件添加到水平轴的标签并获取标签名称并做我想做的事情

我谷歌了很多，但还没有找到正确的解决方案

我所做的是这个

import React, { Component } from 'react'
import { Chart } from "react-google-charts";
export default class manpowerGraph extends Component {
    render() {
     const data=[
        ['Year', 'Sales'],
        ['jan', 20],
        ['feb', 100],
        ['march', 55],
        ['april', 120],
        ['may', 200],
        ['june', 220],


      ]
     const options={
        // Material design options
        chart: {
          title: 'Manpower',
        },
      }
        return (
            <div className="manpowerChart">
<Chart
  chartType="Bar"
  width="100%"
  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 });
        });
      }
    }
  ]}
/>

            </div>
        )
}
}

工作代码我想要的工作代码当用户点击月份标签时它应该触发任何事件或控制台

我用 Javascript发现了这个Javascript

Answer 1

目前，react-google-charts 中可点击的工具提示的可用内容似乎很有限。

但是，为了配置可点击的工具提示以进行反应，需要您设置工具提示选项，如下所示：

tooltip: { isHtml: true, trigger: "selection" }

（这样当您单击时它会保持显示），并且您已经设置了一个select图表事件事件，如下所示：

  chartEvents={[
        {
          eventName: "select",
          callback: ({ chartWrapper, google }) => {
            var selection = chartWrapper.getChart().setAction({
              id: "alertAction",
              text: "Click Me!",
              action: function() {
                alert("Stay away Corona Virus!!");
              }
            });
            console.warn(selection);
          }
        }
      ]}

在这里查看我的代码和框。

这里有一些关于 setAction() 函数的谷歌文档，就像我在示例中编码的方式一样。此外，在同一文档页面上还可以找到与图表工具提示相关的getAction()和函数。removeAction()

希望这对您有所帮助。