将图表类型更改为ColumnChart，然后click从ready处理程序添加处理程序。

        <Chart
          chartType="ColumnChart"
          width="80%"
          height="400px"
          data={data}
          options={options}
          legendToggle
          chartEvents={[
            {
              eventName: "ready",
              callback: ({ chartWrapper, google }) => {
                const chart = chartWrapper.getChart();
                var handler = function(e) {
                  console.log(e);
                  var parts = e.targetID.split("#");
                  if (parts.indexOf("label") >= 0) {
                    let idx = parts[parts.indexOf("label") + 1];
                    idx = parseInt(idx);
                    alert(data[idx + 1][0]);
                  }
                };
                google.visualization.events.addListener(
                  chartWrapper.getChart(),
                  "click",
                  handler
                );
              }
            }
          ]}
        />

https://codesandbox.io/s/react-google-charts-columnchart-with-click-handler-cqe1l

编辑

要回答其他问题：

您可以通过hAxis.textStyle在 中设置来限制 x 轴标签的options样式，可以在此处找到支持的样式选项https://developers.google.com/docs/api/reference/rest/v1/documents#TextStyle。但是，您不能cursor使用 进行设置textStyle。

您svg不能通过外部 css 设置样式。但是您可以在style标签内添加svg标签。同样，并非所有 css 样式都有效，但幸运的是，cursor确实有效。

style在内部添加的一种粗略方法svg是svg使用元素获取元素document.querySelector，然后添加style为子元素。这可以从您的ready处理程序完成，因为svg元素已在ready触发事件时创建。

更新后的代码现在看起来像：

import React from "react";
import ReactDOM from "react-dom";
import Chart from "react-google-charts";
const data = [
  ["Year", "Sales"],
  ["2004", 1000],
  ["2005", 1170],
  ["2006", 660],
  ["2008", 1030],
  ["2009", 1000],
  ["2010", 1170],
  ["2011", 660],
  ["2012", 1030]
];
const options = {
  title: "Company Performance",
  curveType: "function",
  legend: { position: "bottom" },
  enableInteractivity: true,
  hAxis: { textStyle: { color: "blue", underline: true } }
};
class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Chart
          chartType="ColumnChart"
          width="80%"
          height="400px"
          data={data}
          options={options}
          legendToggle
          chartEvents={[
            {
              eventName: "ready",
              callback: ({ chartWrapper, google }) => {
                let svg = document.querySelector("svg");
                let styles = 'text[text-anchor="middle"] { cursor: pointer; }';
                var css = document.createElement("style");
                if (css.styleSheet) {
                  css.styleSheet.cssText = styles;
                } else {
                  css.appendChild(document.createTextNode(styles));
                }
                svg.appendChild(css);

                const chart = chartWrapper.getChart();
                var handler = function(e) {
                  console.log(e);
                  var parts = e.targetID.split("#");
                  if (parts.indexOf("label") >= 0) {
                    let idx = parts[parts.indexOf("label") + 1];
                    idx = parseInt(idx);
                    alert(data[idx + 1][0]);
                  }
                };
                google.visualization.events.addListener(
                  chartWrapper.getChart(),
                  "click",
                  handler
                );
              }
            }
          ]}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

工作沙箱：https : //codesandbox.io/s/react-google-charts-columnchart-with-click-handler-k6fv2

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

但是，为了为 react 配置可点击的工具提示，您需要像这样设置工具提示选项：

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

（以便在您单击时保持显示），并且您已经设置了一个selectchartEvent 事件，如下所示：

  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()同一文档页面上的图表工具提示相关的和函数。

希望这对你有所帮助。

为了使标签可点击，在图表中作为props传递的图表事件中

 <Chart 
  chartEvents = {**chartEvents**}
  rootProps={{ 'data-testid': '3' }}  
/>

使用可以将其作为 chartEvents 传递

    const chartEvents = [
  {
    eventName: "select",
    callback({ chartWrapper }) {
      console.log("Selected ", chartWrapper.getChart().Ufa.Ei);
    }
  }
];

这将返回您单击的图表的标签名称

工作示例