6

我正在研究 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找到了这个

4

3 回答 3

2

将图表类型更改为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

编辑

要回答其他问题：

您可以通过设置来对 x 轴标签进行有限的样式设置hAxis.textStyle，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

于 2020-03-15T20:45:32.430 回答
0

目前在 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() function 的谷歌文档，就像我在我的例子中编码它的方式一样。此外，还有与同一文档页面上的图表工具提示相关的getAction()和函数。removeAction()

希望这对您有所帮助。

于 2020-03-13T07:43:45.920 回答
0

为了使标签可点击，在作为道具传递的 chartEvents 下 Charts

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

使用可以将其作为 chartEvents 传递

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

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

工作示例

于 2021-08-25T11:00:42.177 回答