Google Line Chart Legend Click Events

问题:

I want to hide the line in Line chart when ever the user clicks on the Line Chart legend. Is there any way that I can do it in Google Chart API ? I seen this feature on Highcharts.

回答1:

Yes it is possible. Here is an example by asgallant:

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'City');
    data.addColumn('number', 'Foo');
    data.addColumn('number', 'Foo');
    data.addColumn('number', 'Bar');
    data.addColumn('number', 'Bar');
    data.addColumn('number', 'Baz');
    data.addColumn('number', 'Baz');
    data.addRow(['Boston', 5, null, 7, null, 2, null]);
    data.addRow(['New York', 4, null, 8, null, 5, null]);
    data.addRow(['Baltimore', 6, null, 2, null, 4, null]);

    /*  define the series object
     *  follows the standard 'series' option parameters, except it has two additonal parameters:
     *    hidden: true if the column is currently hidden
     *    altColor: changes the color of the legend entry (used to grey out hidden entries)
     */
    var series = {
        0: {
            hidden: false,
            visibleInLegend: false,
            color: '#FF0000'
        },
        1: {
            hidden: false,
            color: '#FF0000',
            altColor: '#808080'
        },
        2: {
            hidden: false,
            visibleInLegend: false,
            color: '#00FF00'
        },
        3: {
            hidden: false,
            color: '#00FF00',
            altColor: '#808080'
        },
        4: {
            hidden: false,
            visibleInLegend: false,
            color: '#0000FF'
        },
        5: {
            hidden: false,
            color: '#0000FF',
            altColor: '#808080'
        }
    };
    var options = {
        series: series,
        height: 400,
        width: 600
    };

    var view = new google.visualization.DataView(data);
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'select', function () {
        // if row is undefined, we clicked on the legend
        if (typeof chart.getSelection()[0]['row'] === 'undefined') {
            // column is the DataView column, not DataTable column
            // so translate and subtract 1 to get the series index
            var col = view.getTableColumnIndex(chart.getSelection()[0]['column']) - 1;

            // toggle the selected column's data counterpart visibility
            series[col - 1].hidden = !series[col - 1].hidden;

            // swap colors
            var tmpColor = series[col].color;
            series[col].color = series[col].altColor;
            series[col].altColor = tmpColor;

            // reset the view's columns
            view.setColumns([0,1,2,3,4,5,6]);

            // build list of hidden columns and series options
            var hiddenCols = [];
            options.series = [];
            for (var i = 0; i < 6; i++) {
                if (series[i].hidden) {
                    // add 1 to the series index to get DataTable column
                    hiddenCols.push(i + 1);
                }
                else {
                    options.series.push(series[i]);
                }
            }

            // hide the columns and draw the chart
            view.hideColumns(hiddenCols);
            chart.draw(view, options);
        }
    });

    chart.draw(view, options);
}

回答2:

Here is the solution. You can hide line in your line chart by clicking the legend.

        google.visualization.events.addListener(chart, 'select', function () {
        var sel = chart.getSelection();
        // if selection length is 0, we deselected an element
        if (sel.length > 0) {
            // if row is undefined, we clicked on the legend
            if (typeof sel[0].row === 'undefined') {
                var col = sel[0].column;
                if (columns[col] == col) {
                    // hide the data series
                    columns[col] = {
                        label: data.getColumnLabel(col),
                        type: data.getColumnType(col),
                        calc: function () {
                            return null;
                        }
                    };

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

Here is the working sample. jqfaq.com

回答3:

As mentioned above, you can create a DataView for your DataTable and then

to show only the clicked line/column, call view.setColumns(chart.getSelection()[0].column)

to hide the clicked line/column call view.hideColumns(chart.getSelection()[0].column)

getSelection() will have the line/legend on the chart you have selected.