我有一个谷歌电子表格，里面有5列。第0列是标题列，其他四个是值。
我想为四个值列中的每一列执行不同的柱形图（使用谷歌图表API），但我无法隐藏其他列。当我使用
chartview1.setColumns([ 0, 1 ]);
它工作正常！但是当我做的时候
chartview2.setColumns([0, 2 ]);
我收到错误：
无效的列索引2.应该是[0-1]
范围内的整数
同样，当我执行tableview2.setColumns([ 0, 2]);然后将dataView实现为表（而不是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>
答案 0 :(得分：1)
我遇到了类似的问题 - 我从分析数据数组中创建了一个5列DataTable，然后动态构建DataView，以便在用户选择页面上的选项时最终隐藏不同的列集显示为AreaChart。我发现使用view.hideColumns（[3,4]）或view.setColumns（[0,1,2]）隐藏最后2列的工作正常，但任何试图隐藏导致不连续的列列索引集导致AreaChart失败以显示结果 - 听起来你的ColumnChart具有完全相同的问题。
到目前为止，我发现的唯一解决方案是在隐藏列后制作视图的副本。这将创建一个具有连续列索引的新视图，该视图将正确填充图表。它不应该是必要的，但到目前为止我还无法找到解决问题的方法。
所以在你的情况下：
// create view and hide unwanted columns as before
var chartview2 = new google.visualization.DataView(data);
chartview2.setColumns([ 0, 2 ]);
// make a copy of the view to create contiguous index set
var chartview2_copy = new google.visualization.DataView(chartview2);
// use the view copy with the ColumnChart
var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
chart2.draw(chartview2_copy, chartOptions);
这不是很好，但它对我有用，所以也许同样会解决你的问题。