如何使react-google Chart标签可点击
我正在使用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>
)
}
}工作代码Working code I want when user click on month label it should fire any event or console
我在Javascript with Javascript上找到了这个
回答 3
Stack Overflow用户
发布于 2020-03-16 04:45:32
将图表类型更改为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
编辑
要回答其他问题，请执行以下操作：
您可以通过在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
Stack Overflow用户
发布于 2020-03-13 15:43:46
目前在react-google-charts中可点击的工具提示似乎是有限的。
但是，要为react配置可点击的工具提示，需要像这样设置工具提示选项：
tooltip: { isHtml: true, trigger: "selection" }
(以便在您单击时保持显示)，和您已经设置了一个select chartEvent事件，如下所示：
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);
}
}
]}And here's some google documentation on setAction() function，就像我在示例中编写的那样。此外，还有与同一文档页面上的图表工具提示相关联的getAction()和removeAction()函数。
希望这能对你有所帮助。
Stack Overflow用户
发布于 2021-08-25 11:00:42
为了使标签可点击，在作为属性传递到图表下的chartEvents中
<Chart
chartEvents = {**chartEvents**}
rootProps={{ 'data-testid': '3' }}
/>Use可以将其作为chartEvents传递
const chartEvents = [
{
eventName: "select",
callback({ chartWrapper }) {
console.log("Selected ", chartWrapper.getChart().Ufa.Ei);
}
}
];这将返回您单击的图表的标签名称
https://stackoverflow.com/questions/60629886
复制相似问题
腾讯云开发者
