Question

我使用Google Chart在Google地图下绘制折线图。我的目标是当我点击图表上的一个点时会在地图上弹出一个信息窗口。我已经实现了它并且运行良好除外：如果我一直点击图表上的点，地图上的信息窗工作正常，但是一旦我点击图表的标签（据说它会相应地突出显示该行），所有内容都冻结了，我必须刷新整个页面。我的绘画功能：

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(){...}

在此功能中，我添加一个＆＃39; select＆＃39;听众在图表的点上捕捉我的行为，但点击标签是一种选择＆＃39;我猜，所以它会引发一些冲突？我可以放弃点击标签的功能来突出显示行，但只保留弹出信息窗口的功能在地图上，如何关闭标签选择监听器或避免冲突？

非常感谢您的时间和帮助！

由于

Answer 1

您需要检查图表中选择的长度。数组可以是零元素（用户取消选择一个点），也可以包含多个元素（如果用户选择多个点）。您的图表中没有启用多个选择，因此只需测试数组的长度即可：

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);
}

谷歌图表在点击标签后冻结，如何使用＆＃39;选择＆＃39;听众准备好了＃39;听众正确吗？

1 个答案: