google-visualization - 谷歌折线图图例点击事件

Question

当用户单击折线图图例时，我想隐藏折线图中的折线。有什么方法可以在 Google Chart API 中做到吗？我在 Highcharts 上看到了这个功能。

Answer 1

对的，这是可能的。这是 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);
}

Answer 2

这是解决方案。您可以通过单击图例隐藏折线图中的折线。

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

这是工作示例。jqfaq.com

Answer 3

如上所述，您可以为 DataTable 创建一个 DataView，然后

要仅显示单击的行/列，请调用 view.setColumns(chart.getSelection()[0].column)

隐藏单击的行/列调用 view.hideColumns(chart.getSelection()[0].column)

getSelection() 将在您选择的图表上显示线条/图例。