我正在使用Google Chart在Google Map下绘制折线图。我的目标是当我单击图表上的一个点时，将在地图上弹出一个信息窗口。我已经实现了它，并且效果很好，除了：如果我一直单击图表上的点，则地图上的信息窗口可以正常工作，但是一旦单击图表的标签（据称它将相应地突出显示该线），所有冻结的内容都必须刷新整个页面。我绘制的功能：
function drawChart(){
var seriesArr = [];
var columnsArr = [0];
var dataTable = genDataTable(seriesArr, columnsArr);
var dashboard = new google.visualization.Dashboard(document.getElementById('chart_div'));
chart = new google.visualization.ChartWrapper({
'chartType':'LineChart',
'containerId': 'chart',
'options':{
'chartArea': {'height': '80%', 'width': '95%'},
'vAxis': {'viewWindow': {'min': -10, 'max': 120}},
'legend':{'position': 'top'},
'interpolateNulls': true,
'series': seriesArr
},
'view': {'columns': columnsArr}
});
google.visualization.events.addListener(chart, 'ready', onReady);
function onReady() {
google.visualization.events.addListener(chart.getChart(), 'select', popInfoWindow
}
function popInfoWindow(){
chartObject = chart.getChart();
var ts = Date.parse(dataTable.getValue(chartObject.getSelection()[0].row, 0))/1000;
//codes here to pop a infowindow on google map, basically is using the dot's timestamp to find lat/lng
}
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'interpolateNulls': true,
'chartArea': {'width': '95%'},
'curveType': 'function',
},
'chartView': {
'columns': columnsArr
},
}
}
});
dashboard.bind(control, chart);
dashboard.draw(dataTable);
}
如果我不触摸图表标签，一切都会正常。我猜问题出在：
function onReady(){...}
在此功能中，我添加了一个“选择”侦听器以捕获我对图表点的操作，但是我猜单击标签也是一种“选择”，因此会引发一些冲突吗？我可以放弃单击标签来突出显示线条的功能，而只能在地图上保留弹出信息窗口的功能，如何关闭标签选择侦听器或避免冲突？
非常感谢您的宝贵时间和帮助！
谢谢
您需要检查图表中所选内容的长度。该数组的长度可以为零个元素（用户取消选择一个点），或者可以包含多个元素（如果用户选择多个点）。您没有在图表中启用多个选择，因此只需测试数组的长度就足够了：
function popInfoWindow(){
chartObject = chart.getChart();
var selection = chartObject.getSelection();
if (selection.length) {
var ts = Date.parse(dataTable.getValue(selection[0].row, 0))/1000;
//codes here to pop a infowindow on google map, basically is using the dot's timestamp to find lat/lng
}
else {
// do something if the user deselects a point
}
}
另外，您在这里有语法错误：
function onReady() {
google.visualization.events.addListener(chart.getChart(), 'select', popInfoWindow()
}
在(后popInfoWindow应该被删除，并在良好的编码习惯的兴趣，该行应该以终止;：
function onReady() {
google.visualization.events.addListener(chart.getChart(), 'select', popInfoWindow);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句