我正在组装一个仪表板,并尝试做一些应该简单明了的事情。将有一些控件筛选器在仪表板级别操作,但我还需要为单个表指定一些额外的筛选器(静态的,而不是通过控件)。getFilteredRows的方法似乎就是答案,但它并不起作用。
我已经模拟了Google在Code Playground中的例子,试图让它工作。在这种情况下,我试图让饼图只显示那些20岁或更早的人。
(链接到谷歌代码游乐场:http://code.google.com/apis/ajax/playground/?type=visualization#full_dashboard)
我正在尝试的代码:
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael' , 'Male', 12, 5],
['Elisa', 'Female', 20, 7],
['Robert', 'Male', 7, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8],
['Miranda', 'Female', 33, 6]
]);
// Define a slider control for the Age column.
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Age',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Gender',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a Pie chart
var pie = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart1',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'title': 'Donuts eaten per person',
'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
'pieSliceText': 'label'
},
// Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
// from the 'data' DataTable.
'view': {
'columns': [0,3],
'rows': [
{
'calc': function(data) {
return data.getFilteredRows({column: 2, minValue: 20});
},
'type': 'number'
}]
}
});
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '300px'
}
});
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([slider, categoryPicker], [pie, table]).
// Draw the entire dashboard.
draw(data);
}
我对原始示例的唯一更改是添加到饼图的“view”部分。
有人有什么想法吗?
发布于 2012-03-31 02:05:42
几个小变化:*不需要'calc‘,因为它用于创建新的计算列。*即使是单个值,函数的格式也需要数组。
'view': {'columns': [0, 3],
'rows' : data.getFilteredRows([{column: 2, minValue: 20}])}
https://stackoverflow.com/questions/9916586
复制相似问题