admin管理员组文章数量:1424655
I need to handle the onclick event over a Gauge. I don't have found an example for register events over Gauges on the Google Chart documentation.
I have tried the following:
<html>
<head>
<script type="text/javascript" src=";></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart","gauge"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'LABEL');
data.addColumn('number', 'TOTAL');
data.addRows(1);
data.setValue(0, 0, 'Speed');
data.setValue(0, 1, 240);
var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, title: 'Company Performance', redFrom: 250, redTo: 280, minorTicks: 5};
var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
gauge.draw(data, gaugeOptions);
google.visualization.events.addListener(gauge, 'select', function() {
alert("Here");
});
}
</script>
</head>
<body>
<div id="gauge_div"></div>
</body>
</html>
Also I have tried to add onclick event with JQuery to div "gauge_div" but it only works if I make click on the border of div, not over the gauge.
I need to handle the onclick event over a Gauge. I don't have found an example for register events over Gauges on the Google Chart documentation.
I have tried the following:
<html>
<head>
<script type="text/javascript" src="https://www.google./jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart","gauge"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'LABEL');
data.addColumn('number', 'TOTAL');
data.addRows(1);
data.setValue(0, 0, 'Speed');
data.setValue(0, 1, 240);
var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, title: 'Company Performance', redFrom: 250, redTo: 280, minorTicks: 5};
var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
gauge.draw(data, gaugeOptions);
google.visualization.events.addListener(gauge, 'select', function() {
alert("Here");
});
}
</script>
</head>
<body>
<div id="gauge_div"></div>
</body>
</html>
Also I have tried to add onclick event with JQuery to div "gauge_div" but it only works if I make click on the border of div, not over the gauge.
Share Improve this question edited Feb 14, 2021 at 12:11 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Nov 3, 2011 at 14:36 Ernesto CampohermosoErnesto Campohermoso 7,4011 gold badge41 silver badges51 bronze badges4 Answers
Reset to default 2Gauge has no events that it triggers. The chart is rendered in an iframe, which also does not have a click event in the local dom, but rather in the window.document.body of the iframe. A solution I used was to create an empty div relatively positioned on top of the gauge and register the click event on that.
<html>
<head>
<script type="text/javascript" src="https://www.google./jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart","gauge"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'LABEL');
data.addColumn('number', 'TOTAL');
data.addRows(1);
data.setValue(0, 0, 'Speed');
data.setValue(0, 1, 240);
var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, title: 'Company Performance', redFrom: 250, redTo: 280, minorTicks: 5};
var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
gauge.draw(data, gaugeOptions);
google.visualization.events.addListener(gauge, 'select', function() {
alert("Here");
});
}
</script>
</head>
<body style="position:relative;">
<div id="gauge_div"></div>
<div id="gauge_div_clickable" style="position:absolute;z-index:2;top:- 120px;width:120px;height:120px;" onclick="alert('here');">
</body>
</html>
Using jQuery one can use the nth-child selector something like this...
$( "#gauge_div td:nth-child(2)" ).click(function() {
var tData = data.getValue(1,0);
alert( "Handler for .click() called."+ tDate);
});
Assuming your gauge data is held in a variable called "data" you would call the second child and the correct data row would be row "1", as it will start with 0.
ie 0=1, 1=2, 2=3, 3=4, ...
To get clickable gauge, add this javascript:
$('#gauge_div').find('iframe')).each(function(elt, idx) {
$(elt).contents().find('body').click(function (event) {
// gauge.getSelection() does not exists so we emulate its result:
var selection = [{'row': idx}];
mon_onclick_callback(selection);
});
});
Which features:
- distinct gauge
onclick(works with several gauges, and identifies them) - sample of a quick
gauge.getSelection()result emulation, which could be helpfull if you want to re-use anonclickcallback that you would have already written for other google charts type.
This works because:
- each
iframeis looked to hook the event in theirbody(otherwiseonclickevent isn't triggered) - each
onclickcallback gets an appropriate indexidxrelated to their position in the HTML.
This sample uses:
- jquery which is mapped to
$, and provide selector andfind,contentsmethods - underscore which is mapped to
_, and provide theeachfacility
But both of these are optional but convenient.
I started with CrandellWS's answer, but ended up with the following, which is even simpler:
$('#gauge_div td').click(function() {
alert(data.getValue(this.cellIndex,0));
});
本文标签： javascriptHow to add onclick event to Gauge of Google ChartStack Overflow
版权声明：本文标题：javascript - How to add onclick event to Gauge of Google Chart? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745403511a2657144.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论