Google线图传奇点击事件 [英] Google Line Chart Legend Click Events

问题描述

我想在用户点击折线图的图例时将折线隐藏在折线图中。有什么方法可以在Google Chart API中执行此操作吗？我在Highcharts上看过这个功能。

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.

推荐答案

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

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

以下是工作示例。 jqfaq.com

这篇关于Google线图传奇点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！