[英]Google chart line with zoom and select event
I built a line chart that fire an alert when the points are clicked, that works fine.我构建了一个折线图,当点击这些点时会发出警报,效果很好。
The problem is when I add the 'explorer' option (commented line, below) to enable the scroll zoom on the chart: the select
event doesn't fire and the click doesn't work anymore ( fiddle )...问题是当我添加“资源管理器”选项(下面的注释行)以启用图表上的滚动缩放时: select
事件不会触发并且单击不再起作用(小提琴)...
options = {
legend: 'none',
format: 'none',
hAxis: { textPosition: 'none', gridlines: { count: 0 } },
vAxis: { textPosition: 'none', gridlines: { count: 1 } },
curveType: 'function',
pointSize: 20,
};
chart = new google.visualization.LineChart(document.getElementById('chart_div'));
//If I enable this line, ZOOM works fine but the 'select' event don't work....
//options['explorer'] = {axis: 'horizontal',keepInBounds: true,maxZoomIn: 5.0};
chart.draw(data_estruturas, options);
//select event
google.visualization.events.addListener(chart, 'select', function(e) {
var selection = chart.getSelection();
if (selection.length > 0) {
var estrutura = data_estruturas.getValue(selection[0].row, 0)
alert(estrutura);
}
});
}
Put the draw method after register the select event.在注册 select 事件后放置 draw 方法。
//select event
google.visualization.events.addListener(chart, 'select', function(e) {
var selection = chart.getSelection();
if (selection.length > 0) {
var estrutura = data_estruturas.getValue(selection[0].row, 0)
alert(estrutura);
}
});
//After set all options and register events draw the chart
chart.draw(data_estruturas, options);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.