您好我有以下javascript代码（只是尝试一些事情）
// Load the Visualization API
google.load('visualization', '1.0', {'packages': ['controls']});
//Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'MyRace');
data.addColumn('string', 'EnemyRace');
data.addColumn('string', 'Map');
data.addColumn('number', 'GameLength');
data.addColumn('number', 'WinOrLose');
data.addColumn('string', 'Datum');
data.addRows([
['Zerg', 'Zerg', 'Map1', 10.2, 1, '30.12.2013'], ['Zerg', 'Terran', 'Map5', 10.2, 1, '30.12.2013'],
['Zerg', 'Protoss', 'Map4', 15.8, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map1', 10.2, 0, '30.12.2013'],
['Zerg', 'Terran', 'Map3', 13.4, 1, '30.12.2013'], ['Zerg', 'Protoss', 'Map2', 10.2, 1, '30.12.2013'],
['Zerg', 'Zerg', 'Map4', 11.9, 0, '30.12.2013'], ['Zerg', 'Terran', 'Map3', 10.2, 0, '30.12.2013'],
['Zerg', 'Protoss', 'Map5', 12.3, 1, '30.12.2013'], ['Zerg', 'Zerg', 'Map1', 10.2, 1, '30.12.2013'],
['Zerg', 'Terran', 'Map1', 10.2, 1, '30.12.2013'], ['Zerg', 'Protoss', 'Map5', 10.2, 0, '30.12.2013'],
['Zerg', 'Zerg', 'Map2', 10.2, 1, '30.12.2013'], ['Zerg', 'Terran', 'Map1', 10.2, 1, '30.12.2013'],
['Zerg', 'Protoss', 'Map2', 10.2, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map2', 10.2, 0, '30.12.2013'],
['Zerg', 'Terran', 'Map4', 10.2, 1, '30.12.2013'], ['Zerg', 'Protoss', 'Map3', 10.2, 1, '30.12.2013'],
['Zerg', 'Zerg', 'Map5', 10.2, 0, '30.12.2013'], ['Zerg', 'Terran', 'Map4', 10.2, 0, '30.12.2013'],
['Zerg', 'Terran', 'Map1', 10.2, 1, '30.12.2013'], ['Zerg', 'Zerg', 'Map2', 10.2, 1, '30.12.2013'],
['Zerg', 'Protoss', 'Map2', 10.2, 0, '30.12.2013'], ['Zerg', 'Protoss', 'Map1', 10.2, 0, '30.12.2013'],
['Zerg', 'Terran', 'Map3', 10.2, 1, '30.12.2013'], ['Zerg', 'Terran', 'Map2', 10.2, 1, '30.12.2013'],
['Zerg', 'Protoss', 'Map4', 10.2, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map3', 10.2, 0, '30.12.2013'],
['Zerg', 'Zerg', 'Map5', 10.2, 1, '30.12.2013'], ['Zerg', 'Protoss', 'Map4', 10.2, 1, '30.12.2013'],
['Zerg', 'Terran', 'Map1', 10.2, 0, '30.12.2013'], ['Zerg', 'Terran', 'Map5', 10.2, 0, '30.12.2013'],
['Zerg', 'Protoss', 'Map2', 10.2, 1, '30.12.2013'], ['Zerg', 'Zerg', 'Map1', 10.2, 1, '30.12.2013'],
['Zerg', 'Zerg', 'Map3', 10.2, 0, '30.12.2013'], ['Zerg', 'Protoss', 'Map2', 10.2, 0, '30.12.2013'],
['Zerg', 'Terran', 'Map4', 10.2, 1, '30.12.2013'], ['Zerg', 'Terran', 'Map3', 10.2, 1, '30.12.2013'],
['Zerg', 'Protoss', 'Map5', 10.2, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map4', 10.2, 0, '30.12.2013'],
['Zerg', 'Zerg', 'Map1', 10.2, 1, '30.12.2013'], ['Zerg', 'Protoss', 'Map5', 10.2, 1, '30.12.2013'],
['Zerg', 'Terran', 'Map2', 10.2, 0, '30.12.2013'], ['Zerg', 'Terran', 'Map1', 10.2, 0, '30.12.2013'],
['Zerg', 'Protoss', 'Map3', 10.2, 1, '30.12.2013'], ['Zerg', 'Zerg', 'Map2', 10.2, 1, '30.12.2013'],
['Zerg', 'Zerg', 'Map4', 10.2, 0, '30.12.2013'], ['Zerg', 'Protoss', 'Map3', 10.2, 0, '30.12.2013'],
['Zerg', 'Terran', 'Map5', 10.2, 1, '30.12.2013'], ['Zerg', 'Terran', 'Map4', 10.2, 1, '30.12.2013'],
['Zerg', 'Protoss', 'Map1', 10.2, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map5', 10.2, 0, '30.12.2013'],
['Zerg', 'Zerg', 'Map2', 10.2, 1, '30.12.2013'], ['Zerg', 'Protoss', 'Map1', 10.2, 1, '30.12.2013'],
['Zerg', 'Terran', 'Map3', 10.2, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map2', 10.2, 0, '30.12.2013'],
['Zerg', 'Protoss', 'Map4', 10.2, 1, '30.12.2013'], ['Zerg', 'Protoss', 'Map3', 10.2, 1, '30.12.2013'],
['Zerg', 'Zerg', 'Map3', 10.2, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map4', 10.2, 0, '30.12.2013'],
['Zerg', 'Terran', 'Map1', 10.2, 1, '30.12.2013'], ['Zerg', 'Terran', 'Map5', 10.2, 1, '30.12.2013'],
['Zerg', 'Protoss', 'Map2', 10.2, 0, '30.12.2013'], ['Zerg', 'Protoss', 'Map2', 10.2, 0, '30.12.2013'],
['Zerg', 'Zerg', 'Map3', 10.2, 1, '30.12.2013'], ['Zerg', 'Zerg', 'Map2', 10.2, 1, '30.12.2013'],
['Zerg', 'Terran', 'Map4', 10.2, 0, '30.12.2013'], ['Zerg', 'Zerg', 'Map1', 10.2, 0, '30.12.2013']
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
wrapper = new google.visualization.ChartWrapper({
chartType: 'BarChart',
options: {title: 'Winratios gegen die verschiedenen Rassen',
width: 400,
height: 300,
backgroundColor: '#232326',
titleTextStyle: {color: '#99999b'},
//vAxis: {textStyle: {color: '#99999b'}},
//hAxis: {textStyle: {color: '#99999b'}, ticks: [0,0.2,0.4,0.6,0.8,1] },
legend: 'none'
},
containerId: 'chart_div',
'view': {'columns': [1, 4]}
});
google.visualization.events.addListener(wrapper, 'ready',
function(event) {
alert(wrapper.getDataTable().getColumnLabel(4));
wrapper.setDataTable(google.visualization.data.group(wrapper.getDataTable(), [1], [{'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'}]));
wrapper.draw();
});
var GL = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'GL_div',
'options': {
'filterColumnIndex': '3'
}
});
var MyRace = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'MyRace_div',
'options': {
'filterColumnIndex': '0'
}
});
var EnemyRace = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'EnemyRace_div',
'options': {
'filterColumnIndex': '1'
}
});
var Karte = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'Karte_div',
'options': {
'filterColumnIndex': '2'
}
});
var Datum = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'Datum_div',
'options': {
'filterColumnIndex': '5'
}
});
dashboard.bind([MyRace, EnemyRace, Karte, GL, Datum], wrapper);
dashboard.draw(data);
}
我现在的问题是，我收到了有关columnlaben（WinOrLose）的正确值的警告，但它在分组上抛出了一个错误，说该列只能是介于0和1之间的值。任何想法如何解决？如果我使用colum 1或0进行分组，我会得到错误，因为他选择了原始数据表的第0列或第1列作为字符串，因此无法对这些列进行处理。我怎样才能让他按第4栏分组？
非常感谢你的帮助。
答案 0 :(得分：1)
问题是你将包装器视图定义为'view'：{'columns'：[1,4]}。
这意味着此条形图期望具有至少5列的数据表来创建视图。 但是这个小组的功能
google.visualization.data.group(wrapper.getDataTable(), [1], [{'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'}])
创建只有两列的数据表，因此警告从索引范围[0到1]中进行选择。
如果您将创建如下所示的新包装器并传递结果数据表，那么它将被渲染。
wrapper2 = new google.visualization.ChartWrapper({
chartType: 'BarChart',
options: {title: 'Winratios gegen die verschiedenen Rassen',
width: 400,
height: 300,
backgroundColor: '#232326',
titleTextStyle: {color: '#99999b'},
//vAxis: {textStyle: {color: '#99999b'}},
//hAxis: {textStyle: {color: '#99999b'}, ticks: [0,0.2,0.4,0.6,0.8,1] },
legend: 'none'
},
containerId: 'chart_div2',
'view': {'columns': [0, 1]}
});
google.visualization.events.addListener(wrapper, 'ready',
function(event) {
wrapper2.setDataTable(google.visualization.data.group(wrapper.getDataTable(), [1], [{'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'}]));
wrapper2.draw();
dashboard.bind([MyRace, EnemyRace, Karte, GL, Datum], wrapper2);
dashboard.draw(data);
});