Google Chart：如何将选择事件处理程序添加到饼图中？答案

【问题标题】：Google Chart : How do I add select event handler to the pie chart?Google Chart：如何将选择事件处理程序添加到饼图中？
【发布时间】：2016-09-01 23:27:19
【问题描述】：

我能够成功生成饼图。但是，当我尝试向饼图添加选择事件侦听器时，它根本不会触发该函数。

function handlePieChartResponse(response)
    {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        var dataTable = response.getDataTable();
        if (dataTable.getNumberOfRows() <= 0) {
            document.getElementById('dummyTableRow').innerHTML = '<span>No data found</span>';
            return;
        }

        var chartOptions = DEFAULT_PIE_CHART_OPTIONS;
        //var chartOverallPmmLevelCalculated = new google.visualization.ChartWrapper({
           // 'chartType': 'PieChart',
           // 'containerId': 'chartOverallPmmLevelCalculatedHtml',
            // options: chartOptions
        //});

        var chartRecentPmmLevelCalculated = new google.visualization.PieChart(document.getElementById('chartOverallPmmLevelCalculatedHtml'));
        chartRecentPmmLevelCalculated.draw(dataTable, chartOptions);

        google.visualization.events.addListener(chartRecentPmmLevelCalculated, 'ready', function () { drawPieChart(); });
        google.visualization.events.addListener(chartRecentPmmLevelCalculated, 'select', function () { selectHandler(); });

        function drawPieChart() {
            var responseDataTable = response.getDataTable();
            var chartDataTable = new google.visualization.DataTable();
            chartDataTable.addColumn('string', 'LEVEL');
            chartDataTable.addColumn('number', 'SCORE');
            var chartDataTableRow = new Array();
            var rowCounter;
            var levelValue;
            for (rowCounter = 0; rowCounter < responseDataTable.getNumberOfRows() ; rowCounter++) {
                var seek = 0 * 1;
                levelValue = responseDataTable.getValue(rowCounter, 0);
                chartDataTableRow[seek++] = "LEVEL " + levelValue;
                chartDataTableRow[seek++] = responseDataTable.getValue(rowCounter, 1);
                chartDataTable.addRow(chartDataTableRow);
            }
            chartDataTable.sort([{ column: 1 }]);
            chartOverallPmmLevelCalculated.setDataTable(chartDataTable);
            chartOverallPmmLevelCalculated.draw();
        }
        handlePieChartResponse.drawPieChart = drawPieChart;
    }

    function selectHandler() {
        alert("This alert triggered from pie chart");
        var selectedItem = chartRecentPmmLevelCalculated.getSelection();
        if (selectedItem) {
            var levelSelected = chartOverallPmmLevelCalculated.getValue(selectedItem.row, 0);
            alert(levelSelected);
        }
    }

我附上了 2 张图片，包括点击前后的图片。一旦在饼图切片上选择，我就会期待警报消息。但是不存在警报，也没有触发函数调用。

【问题讨论】：

标签： google-visualization

【解决方案1】：

问题与范围有关

selectHandler 在函数handlePieChartResponse 之外

所以找不到了

把它移到handlePieChartResponse里面

然后设置事件，像这样...

...addListener(chartRecentPmmLevelCalculated, 'select', selectHandler);

【讨论】：

非常感谢。我总是遇到这些范围问题。从错误中吸取教训。