求助：Google Line Chart实现图例点击显示/隐藏数据系列

我用Google Line Chart制作了一个包含多数据系列的图表，需要实现点击图例即可显示/隐藏对应数据系列的功能，但目前实现遇到了瓶颈：网上找到的示例无法正常生效，当前代码只能隐藏“日期列”，无法实现从第1个值开始的整个数据系列的显隐控制。

当前效果：

• 初始状态：图表正常显示所有数据系列与日期轴
• 触发选择事件后：仅日期列被隐藏，数据系列的显隐逻辑未按预期工作

当前代码：

$(function() {
    if (typeof Adianti.chartsQueue == 'undefined')
    {
        Adianti.chartsQueue = new Array;
    }
    function render_charts()
    {
        Adianti.chartsLoaded = true;
        while (Adianti.chartsQueue.length > 0)
        {
            next = Adianti.chartsQueue.shift();
            next();
        }
    }
    
    var render_line_chart = function() {
        var data = google.visualization.arrayToDataTable( {$data|raw} );
        var options = {
          title : '{$title}',
          vAxis: {title: '{$ytitle}'},
          hAxis: {title: '{$xtitle}'},
          seriesType: 'lines'
        };

        var view = new google.visualization.DataView(data);

        //view.setRows([0,1,2,3,4,5,6,7,8,9])

        var chart = new google.charts.Line(document.getElementById('chart_line_div_{$uniqid}'));

        google.visualization.events.addListener(chart, 'select', function () {
          //var target = chart.getSelection();

          //teste = chart.getSelection();

          //view.setColumns([0,1,3])
          view.hideRows(0,0)
          //view.hideRows(0);

          chart.draw(view, options);
        });
        //chart.draw(data, options);
        chart.draw(view, options);

    };
        

    if (Adianti.chartsQueue.length == 0) {
        Adianti.chartsQueue.push( render_line_chart );
        
        if (typeof google === 'undefined' || typeof google.visualization === 'undefined') {
            jQuery.ajax({
                    type: "GET",
                    url: "https://www.gstatic.com/charts/loader.js",
                    success: function() {
                        google.charts.load('current', {'packages':['bar', 'line', 'corechart']});
                        google.charts.setOnLoadCallback(render_charts);
                    },
                    dataType: "script",
                    cache: true
            });

        }
        else {
            render_charts();
            

        }
    }
    else
    {
        Adianti.chartsQueue.push( render_line_chart );
    }
});

解决方案 #

核心思路

Google Charts的select事件中，当点击图例时，返回的选中对象row属性为null，column属性对应数据系列的列索引（从1开始，第0列为日期轴）。我们需要维护一个数组记录当前显示的列，通过DataView.setColumns方法动态控制列的显隐，从而实现点击图例切换系列显示状态的功能。

修改后的完整代码

$(function() {
    if (typeof Adianti.chartsQueue == 'undefined')
    {
        Adianti.chartsQueue = new Array;
    }
    function render_charts()
    {
        Adianti.chartsLoaded = true;
        while (Adianti.chartsQueue.length > 0)
        {
            next = Adianti.chartsQueue.shift();
            next();
        }
    }
    
    var render_line_chart = function() {
        var data = google.visualization.arrayToDataTable( {$data|raw} );
        var options = {
          title : '{$title}',
          vAxis: {title: '{$ytitle}'},
          hAxis: {title: '{$xtitle}'},
          seriesType: 'lines'
        };

        // 初始化显示列：默认显示日期列（索引0）和所有数据系列
        var visibleColumns = [0];
        for (var i = 1; i < data.getNumberOfColumns(); i++) {
            visibleColumns.push(i);
        }
        var view = new google.visualization.DataView(data);
        view.setColumns(visibleColumns);

        var chart = new google.charts.Line(document.getElementById('chart_line_div_{$uniqid}'));

        google.visualization.events.addListener(chart, 'select', function () {
            var selection = chart.getSelection();
            // 判断是否点击了图例（row为null表示点击图例）
            if (selection.length > 0 && selection[0].row === null) {
                var targetCol = selection[0].column;
                var colIndex = visibleColumns.indexOf(targetCol);
                
                if (colIndex > -1) {
                    // 若该系列当前显示，则隐藏
                    visibleColumns.splice(colIndex, 1);
                } else {
                    // 若该系列当前隐藏，则显示，并保持列顺序
                    visibleColumns.push(targetCol);
                    visibleColumns.sort(function(a, b) {
                        return a - b;
                    });
                }
                // 更新视图并重新绘制图表
                view.setColumns(visibleColumns);
                chart.draw(view, options);
            }
        });

        chart.draw(view, options);
    };
        

    if (Adianti.chartsQueue.length == 0) {
        Adianti.chartsQueue.push( render_line_chart );
        
        if (typeof google === 'undefined' || typeof google.visualization === 'undefined') {
            jQuery.ajax({
                    type: "GET",
                    url: "https://www.gstatic.com/charts/loader.js",
                    success: function() {
                        google.charts.load('current', {'packages':['bar', 'line', 'corechart']});
                        google.charts.setOnLoadCallback(render_charts);
                    },
                    dataType: "script",
                    cache: true
            });

        }
        else {
            render_charts();
        }
    }
    else
    {
        Adianti.chartsQueue.push( render_line_chart );
    }
});

关键修改说明

1. 显隐状态维护：新增visibleColumns数组，记录当前需要显示的列索引，初始包含所有列。
2. 图例点击判断：通过selection[0].row === null精准识别图例点击事件，获取对应的系列列索引。
3. 动态更新列：根据当前系列的显隐状态，通过splice（隐藏）和push+排序（显示）修改visibleColumns，再调用view.setColumns更新视图。
4. 保持系列顺序：显示系列时对visibleColumns排序，保证图表系列顺序与原始数据一致，避免混乱。

内容的提问来源于stack exchange，提问作者Kauê Zuquetto