在Google Chart中显示/隐藏行/数据

我正在尝试制作一条包含2行的谷歌折线图。

您应该能够通过两个复选框打开和关闭它们（显示/隐藏）。

任何人都有任何想法表明，og只是给出一些指示？

我的猜测是onClick jQuery的东西？

    google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance' }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); }    
   

Answer 1

试试这个

标记：

   
 Hide Sales Hide Expence  

脚本：

Answer 2

要获得所需的输出，请检查此代码。

 var sel = chart.getSelection(); // if selection length is 0, we deselected an element if (sel.length > 0) { // if row is null, we clicked on the legend if (sel[0].row == null) { 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

最近， select活动的行为发生了变化，因此Abinaya Selvaraju的回答需要稍加修复

 if (typeof sel[0].row === 'undefined') { ... } 

变

 if (sel[0].row == null) { ... } 

Answer 4

我更新了Shinov T提供的解决方案，允许真正切换（显示/隐藏）列。 你可以在这个小提琴中看到结果。

我添加了此代码以保存每列的当前状态以允许切换：

 var toggleSales = document.getElementById("toggleSales"); var salesHidden = false; toggleSales.onclick = function() { salesHidden = !salesHidden; view = new google.visualization.DataView(data); if (salesHidden) { view.hideColumns([1]); } chart.draw(view, options); } var toggleExp = document.getElementById("toggleExpenses"); var expHidden = false; toggleExp.onclick = function() { expHidden = !expHidden; view = new google.visualization.DataView(data); if (expHidden) { view.hideColumns([2]); } chart.draw(view, options); }