1
我有一個谷歌電子表格5列在其中。列0是標題列，其他四個都有值。如何正確隱藏我的Google圖表中的列？
我想爲四個值列中的每一列做不同的柱狀圖（使用谷歌圖表API），但我無法隱藏其他列。當我使用
chartview1.setColumns([ 0, 1 ]);
它工作正常！但是，當我做
chartview2.setColumns([0, 2 ]);
我得到的錯誤：
Invalid column index 2. Should be an integer in the range [0-1]
同樣的，當我做tableview2.setColumns([ 0, 2]);，然後實現數據視圖爲表（而不是ColumnChart中）
它工作正常並隱藏其他列。
誰能告訴我我做錯了什麼？如有必要，我可以提供完整的代碼。
我嘗試使用此處列出的方法： how to hide column in google charts table 但這不適用於我。
感謝
更新：這裏是完整的代碼：
<html>
<head>
<meta charset="UTF-8">
<title>Service Desk Performance (Weekly)</title>
<style>
h2 {
font-family:"helvetica",arial, sans-serif;
}
.tableHeader {
background:transparent;
}
.tableHeader th {
background-image:none !important;
background:#ccc !important;
color:#fff !important;
border-bottom:2px solid #222 !important;
}
.tableRow {
background:#e9e9e9;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart", "table"]});
function initialize() {
var opts = {sendMethod: 'auto'};
// Replace the data source URL on next line with your data source URL.
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1c6r2xi4eY4iGcgWCRQcPce8A79OhDN4v5khkkC2WFVM/edit?usp=sharing', opts);
-
// Optional request to return only column C and the sum of column B, grouped by C members.
//query.setQuery('select C, sum(B) group by C');
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chartview1 = new google.visualization.DataView(data);
var tableview1 = new google.visualization.DataView(data);
var chartview2 = new google.visualization.DataView(data);
var tableview2 = new google.visualization.DataView(data);
var chartview3 = new google.visualization.DataView(data);
var tableview3 = new google.visualization.DataView(data);
var chartview4 = new google.visualization.DataView(data);
var tableview4 = new google.visualization.DataView(data);
chartview1.setColumns([ 0, 1 ]);
tableview1.setColumns([ 0, 1 ]);
chartview2.setColumns([ 0, 2 ]);
tableview2.setColumns([ 0, 2 ]);
chartview3.setColumns([ 0, 3 ]);
tableview3.setColumns([ 0, 3 ]);
chartview4.setColumns([ 0, 4 ]);
tableview4.setColumns([ 0, 4 ]);
var test= chartview2.getNumberOfColumns();
console.log(test);
var chartOptions = {
vAxis: {
title: 'Requests',
gridlines: {color: 'transparent'},
baseline:0
},
chartArea: {
left:100,
top:40,
width:"100%"
},
hAxis: { title: 'Assignee Group' },
colors: [ '#00ccff', '#afafaf' ],
animation: {
startup: true,
duration: 500,
easing: 'in'
},
legend: {position:'none'}
};
var tableOptions = {
showRowNumber: false,
right:100,
top:40,
width: '100%',
alternatingRowStyle: false,
cssClassNames: {
headerRow: 'tableHeader',
tableRow: 'tableRow',
tableCell: 'tableCell'
}
};
var chart1 = new google.visualization.ColumnChart(document.getElementById('chart1'));
var table1 = new google.visualization.Table(document.getElementById('table1'));
chart1.draw(chartview1, chartOptions);
table1.draw(tableview1, tableOptions);
var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
var table2 = new google.visualization.Table(document.getElementById('table2'));
chart2.draw(chartview2, chartOptions);
table2.draw(tableview2, tableOptions);
var chart3 = new google.visualization.ColumnChart(document.getElementById('chart3'));
var table3 = new google.visualization.Table(document.getElementById('table3'));
chart3.draw(chartview3, chartOptions);
table3.draw(tableview3, tableOptions);
var chart4 = new google.visualization.ColumnChart(document.getElementById('chart4'));
var table4 = new google.visualization.Table(document.getElementById('table4'));
chart4.draw(chartview4, chartOptions);
table4.draw(tableview4, tableOptions);
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<h2>Week 1</h2>
<div class="row">
<div style="float:left;width:70%;">
<div id="chart1" style="width:100%; height:600px;position:relative;"></div>
</div>
<div style="float:right;width:30%;">
<div id="table1" style="width:100%;margin:10px 40px 0 0;"></div>
</div>
<div style="clear:both"></div>
</div>
<hr>
<h2>Week 2</h2>
<div class="row">
<div style="float:left;width:70%;">
<div id="chart2" style="width:100%; height:600px;position:relative;"></div>
</div>
<div style="float:right;width:30%;">
<div id="table2" style="width:100%;margin:10px 40px 0 0;"></div>
</div>
<div style="clear:both"></div>
</div>
<h2>Week 3</h2>
<div class="row">
<div style="float:left;width:70%;">
<div id="chart3" style="width:100%; height:600px;position:relative;"></div>
</div>
<div style="float:right;width:30%;">
<div id="table3" style="width:100%;margin:10px 40px 0 0;"></div>
</div>
<div style="clear:both"></div>
</div>
<hr>
<h2>Week 4</h2>
<div class="row">
<div style="float:left;width:70%;">
<div id="chart4" style="width:100%; height:600px;position:relative;"></div>
</div>
<div style="float:right;width:30%;">
<div id="table4" style="width:100%;margin:10px 40px 0 0;"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>