如何使 react-google 图表标签可点击

Question

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

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

我做的是这个

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>
        )
}
}

工作代码Working code I want when user click on month label it should fire any event or console

我在Javascript with Javascript 找到了这个

Answer 1

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

        <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

编辑

回答其他问题：

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

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

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

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

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

Answer 2

目前在 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);
          }
        }
      ]}

See my codesandbox here.

And here's some google documentation on setAction() function，就像我在示例中的编码方式一样。此外，还有与同一文档页面上的图表工具提示相关的 getAction() 和 removeAction() 函数。

希望这对你有所帮助。

Answer 3

为了使标签可点击，在charts下作为props传递的chartEvents中

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

使用可以将其作为 chartEvents 传递

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

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

working example