如何隱藏谷歌可視化表中的列？

我是新來的谷歌API，我有疑問谷歌可視化表中。如何隱藏谷歌可視化表中的列？

我的問題是有任何可能的方法來隱藏可視化數據表中的特定列。

這裏是我的代碼：

<html> 
<head> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load('visualization', '1', {packages: ['table']}); 
</script> 
<script type="text/javascript"> 
var cssClass = {rowNumberCell: 'rowNumberCellClass'}; 

function drawVisualization() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('string', 'Place'); 
    data.addRows(4); 
    data.setCell(0, 0, 'John'); 
    data.setCell(1, 0, 'Sam'); 
    data.setCell(2, 0, 'Andreson'); 
    data.setCell(3, 0, 'Cody'); 

    data.setCell(0, 1, 'Stockholm'); 
    data.setCell(1, 1, 'Dubai'); 
    data.setCell(2, 1, 'India'); 
    data.setCell(3, 1, 'Australia'); 

    visualization = new google.visualization.Table(document.getElementById('tableContainer')); 

    visualization.draw(data, { 
     allowHtml: true, 
     showRowNumber: true, 
     cssClassNames: cssClass 
    } 

); 

    } 
    google.setOnLoadCallback(drawVisualization); 
</script> 
</head> 
<body> 
<div id="tableContainer"></div> 
</body> 
</html>

在上面的代碼中，我用 '視圖' 選項，如下所示：

visualization.draw(data, { 
     allowHtml: true, 
     showRowNumber: true, 
     cssClassNames: cssClass, 
     view: {columns: [0]} 
    });

這是行不通的。

任何幫助，將不勝感激！提前致謝！！

來源

2015-12-07 GogDev

使用DataView -instance的數據，並通過setColumns設置列：

var cssClass = {rowNumberCell: 'rowNumberCellClass'}; 
 

 
function drawVisualization() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Name'); 
 
    data.addColumn('string', 'Place'); 
 
    data.addRows(4); 
 
    data.setCell(0, 0, 'John'); 
 
    data.setCell(1, 0, 'Sam'); 
 
    data.setCell(2, 0, 'Andreson'); 
 
    data.setCell(3, 0, 'Cody'); 
 

 
    data.setCell(0, 1, 'Stockholm'); 
 
    data.setCell(1, 1, 'Dubai'); 
 
    data.setCell(2, 1, 'India'); 
 
    data.setCell(3, 1, 'Australia'); 
 

 
    var view = new google.visualization.DataView(data); 
 
    
 
    view.setColumns([0]);//only use the first column 
 
    
 
    var visualization = new google.visualization.Table(document.getElementById('tableContainer')); 
 

 
    visualization.draw(view, { 
 
     allowHtml: true, 
 
     showRowNumber: true, 
 
     cssClassNames: cssClass 
 
    } 
 

 
); 
 

 
    } 
 
    google.setOnLoadCallback(drawVisualization);

<div id="tableContainer"></div> 
 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
 
<script type="text/javascript"> 
 
google.load('visualization', '1', {packages: ['table']}); 
 
</script>

來源

2015-12-07 13:20:31

大和感謝Dr.Molle ......它的偉大工程，真棒.... – GogDev

我有一個10K行和9列的表，我想顯示/隱藏複選框選擇列，我知道我可以重新繪製JavaScript中的點擊事件的視圖取決於複選框的選擇，但這需要一些時間來重繪每一次，是否有可能動態顯示/隱藏一列，就像highcharts pro一樣提供此功能？ –

如何隱藏谷歌可視化表中的列？

回答

相關問題