Javascript 使用Google图表API仪表板时遇到getFilteredRows问题
我正在组装一个仪表板,并试图做一些应该是直截了当的事情。将有控制过滤器在仪表板级别运行,但我还需要为单个表指定一些附加过滤器(静态,而不是通过控制)。getFilteredRows的方法似乎是答案,但它不起作用 我已经模拟了谷歌在代码操场上的例子,试图让它发挥作用。在本例中,我试图让饼图只显示20岁或以上的人 (链接到谷歌代码游乐场:) 我正在尝试的代码:Javascript 使用Google图表API仪表板时遇到getFilteredRows问题,javascript,google-visualization,Javascript,Google Visualization,我正在组装一个仪表板,并试图做一些应该是直截了当的事情。将有控制过滤器在仪表板级别运行,但我还需要为单个表指定一些附加过滤器(静态,而不是通过控制)。getFilteredRows的方法似乎是答案,但它不起作用 我已经模拟了谷歌在代码操场上的例子,试图让它发挥作用。在本例中,我试图让饼图只显示20岁或以上的人 (链接到谷歌代码游乐场:) 我正在尝试的代码: function drawVisualization() { // Prepare the data var data = goog
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);
}
我对原始示例所做的唯一更改是添加到饼图的“视图”部分
有人有什么想法吗?几个小变化:
*不需要“calc”,因为它用于创建新的计算列。
*函数的格式要求数组,即使对于单个值也是如此
'view': {'columns': [0, 3],
'rows' : data.getFilteredRows([{column: 2, minValue: 20}])}
几个小变化:
*不需要“calc”,因为它用于创建新的计算列。
*函数的格式要求数组,即使对于单个值也是如此
'view': {'columns': [0, 3],
'rows' : data.getFilteredRows([{column: 2, minValue: 20}])}