如何在Chartwrapper GoogleCharts中添加Listener

Question

我有一个仪表板（破折号）和一个控件包装（图表）

我要做的是点击一系列切换开启/关闭。我以前能够切换系列，但从不在仪表板或包装内。包装器是否支持此功能？我无法找出使其工作的语法

这是我的整个代码：

<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls', 'charteditor']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date'); 
        data.addColumn('number', 'series1');
        data.addColumn('number', 'series2');
        data.addRows([
          [new Date(2015, 11, 15, 1, 30), 10, 100],
          [new Date(2015, 11, 16, 2, 30), 20, 90],
          [new Date(2015, 11, 17, 3, 30), 30, 80],
          [new Date(2015, 11, 18, 4, 50), 40, 70],
          [new Date(2015, 11, 19, 13, 11), 50, 60],
          [new Date(2015, 11, 20, 23, 59), 60, 50],
        ]);

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));

    var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    height: 50,
                    width: 1280,
                    chartArea: {
                        width: '80%'
                    }
                },              
            },          
        }
    }); 

    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div'
    });



    function setOptions (wrapper) {
        wrapper.setOption('title', 'Avg Military Strength');
        wrapper.setOption('height', 400);
        wrapper.setOption('width', 1280);
        wrapper.setOption('chartArea.width', '80%');
        wrapper.setOption('animation.duration', 0);
    }

    function showHideSeries () {
    var sel = dash.getSelection();      

    // if selection length is 0, we deselected an element
    if (sel.length > 0) {

        // if row is undefined, we clicked on the legend
        if (sel[0].row == null) {           

            var col = sel[0].column;

            if (col > 0) {

                alert('hide the data?'); //i can get this alert
                // hide the data series 


                    columns[col] = {
                        label: data.getColumnLabel(col),
                        type: data.getColumnType(col),
                        calc: function () {
                            return null;
                        }                       

                    };

                    alert('grey the data?');//i cannot get this alert
                    // grey out the legend entry
                    series[col - 1].color = '#CCCCCC';
                }
                else {
                    // show the data series
                    columns[col] = col;
                    series[col - 1].color = null;
                }                   


            var view = new google.visualization.DataView(data);
            view.setColumns(columns);
            chart.draw(view, options);
        }
    }
}


    setOptions(chart);   

    dash.bind([control], [chart]);
    dash.draw(data);

    google.visualization.events.addListener(chart , 'ready', function(){
         google.visualization.events.addListener(chart ,'select', showHideSeries);
    });


}
</script>

<div id="dashboard">
    <div id="chart_div"></div>
    <div id="control_div"></div>
</div>

这是给我特别麻烦的部分（特别是前2行）

function showHideSeries () {
    var sel = dash.getSelection();      

    // if selection length is 0, we deselected an element
    if (sel.length > 0) {

        // if row is undefined, we clicked on the legend
        if (sel[0].row == null) {           

            var col = sel[0].column;

            if (col > 0) {

                alert('hide the data?'); //i can get this alert
                // hide the data series 


                    columns[col] = {
                        label: data.getColumnLabel(col),
                        type: data.getColumnType(col),
                        calc: function () {
                            return null;
                        }                       

                    };

                    alert('grey the data?');//i cannot get this alert
                    // grey out the legend entry
                    series[col - 1].color = '#CCCCCC';
                }
                else {
                    // show the data series
                    columns[col] = col;
                    series[col - 1].color = null;
                }                   


            var view = new google.visualization.DataView(data);
            view.setColumns(columns);
            chart.draw(view, options);
        }
    }
}

警报已发送，因此我认为我正确调用它，但它不会返回任何内容，以便将来的点击停止返回警报。

非常感谢任何帮助。

编辑：我已经将它缩小到函数中使数据点为空的部分。我已经从以前工作过的东西中回收了这个功能，所以我很困惑为什么我可以调用这个功能，但现在它已经失败了。

          if (col > 0) {

                alert('hide the data?'); //i can get this alert
                // hide the data series                     

                columns[col] = {
                    label: data.getColumnLabel(col),
                    type: data.getColumnType(col),
                    calc: function () {
                        return null;
                    }                       

                };

                alert('grey the data?');//i cannot get this alert
                // grey out the legend entry
                series[col - 1].color = '#CCCCCC';
            }
            else {
                // show the data series
                columns[col] = col;
                series[col - 1].color = null;
            }