Question

我是google 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>

在上面的代码中，我使用了'view'选项，如下所示：

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

它不起作用。

任何帮助将不胜感激！在此先感谢!!

Answer 1

使用DataView - 实例作为数据，并通过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>

如何隐藏谷歌可视化表中的列？

1 个答案: