Google visualization 谷歌折线图图例点击事件

我想在用户单击折线图图例时隐藏折线图中的折线。有什么方法可以在谷歌图表API中实现吗？我在海图上看到了这个功能

是的，这是可能的：

函数绘图图（）{
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'）；
addRow（['Boston'，5，null，7，null，2，null]）；
addRow（['newyork'，4，null，8，null，5，null]）；
addRow（['Baltimore'，6，null，2，null，4，null]）；
/*定义序列对象
*遵循标准的“系列”选项参数，但有两个附加参数：
*隐藏：如果列当前处于隐藏状态，则为true
*altColor：更改图例条目的颜色（用于灰显隐藏条目）
*/
变量系列={
0: {
隐藏：假，
visibleInLegend:false，
颜色：“#FF0000”
},
1: {
隐藏：假，
颜色：“#FF0000”，
altColor:“#8080”
},
2: {
隐藏：假，
visibleInLegend:false，
颜色：“#00FF00”
},
3: {
隐藏：假，
颜色：“#00FF00”，
altColor:“#8080”
},
4: {
隐藏：假，
visibleInLegend:false，
颜色：“#0000FF”
},
5: {
隐藏：假，
颜色：“#0000FF”，
altColor:“#8080”
}
};
变量选项={
系列:系列,，
身高：400，
宽度：600
};
var view=newgoogle.visualization.DataView（数据）；
var chart=new google.visualization.ColumnChart（document.getElementById（'chart_div'））；
google.visualization.events.addListener（图表，'select'，函数（）{
//如果行未定义，则单击图例
if（type of chart.getSelection（）[0]['row']=='undefined'）{
//列是DataView列，而不是DataTable列
//因此，平移并减去1得到序列索引
var col=view.getTableColumnIndex（chart.getSelection（）[0]['column']）-1；
//切换选定列的数据副本可见性
系列[col-1]。隐藏=！系列[col-1]。隐藏；
//调色
var tmpColor=系列[col]。颜色；
系列[col].color=系列[col].altColor；
系列[col].altColor=tmpColor；
//重置视图的列
view.setColumns（[0,1,2,3,4,5,6]）；
//生成隐藏列和系列选项的列表
var hiddenCols=[]；
options.series=[]；
对于（变量i=0；i<6；i++）{
if（系列[i]。隐藏）{
//将1添加到序列索引以获取DataTable列
hiddenCols.push（i+1）；
}
否则{
选项.series.push（系列[i]）；
}
}
//隐藏列并绘制图表
视图。hideColumns（hiddenCols）；
图表绘制（视图、选项）；
}
});
图表绘制（视图、选项）；
}

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

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

---

这是工作样本

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

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

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

---

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

如果使用仪表板对象会怎么样？@Rutger，谢天谢地，他现在一直都在参与其中——因为这本来是他的逻辑，所以可能有必要问一个新问题，参考这个问题，他很可能会回答，因为他非常聪明，并且致力于帮助你们！

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