在 Google 可视化 Table 中过滤后计算行数
Count number of rows after filter in Google Visualisation Table
我已经在 Google 可视化 Table 中为多个过滤器实现了各种控件:CategoryFilter、StringFilter 和 NumberRangeFilter 就像这个例子
http://jsfiddle.net/asgallant/Ena84/
是否可以知道每个过滤器设置后 table 中可视化的行数?
谢谢。
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Team');
data.addColumn('string', 'Nationality');
data.addColumn('number', 'Height');
data.addColumn('number', 'Weight');
data.addColumn('number', 'OverallRating');
data.addColumn('string', 'Foot');
data.addRows([
['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot'],
['A. INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot'],
['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot']
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var stringFilter = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'string_filter_div',
options: {
filterColumnIndex: 0
}
});
var numberRangeFilter = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'numnber_range_filter_div',
options: {
filterColumnIndex: 5,
minValue: 0,
maxValue: 100,
ui: {
label: 'Overall Rating'
}
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: true
}
});
dashboard.bind([stringFilter, numberRangeFilter], [table]);
dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});
一旦 'ready'
事件在任何控件、图表或仪表板上触发
您可以在任何控件或图表上使用 getDataTable
方法
到getNumberOfRows
请参阅以下工作片段...
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Team');
data.addColumn('string', 'Nationality');
data.addColumn('number', 'Height');
data.addColumn('number', 'Weight');
data.addColumn('number', 'OverallRating');
data.addColumn('string', 'Foot');
data.addRows([
['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot'],
['A. INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot'],
['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot']
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var stringFilter = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'string_filter_div',
options: {
filterColumnIndex: 0
}
});
var numberRangeFilter = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'numnber_range_filter_div',
options: {
filterColumnIndex: 5,
minValue: 0,
maxValue: 100,
ui: {
label: 'Overall Rating'
}
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: true
}
});
dashboard.bind([stringFilter, numberRangeFilter], [table]);
google.visualization.events.addListener(dashboard, 'ready', function () {
// get number of rows
console.log(table.getDataTable().getNumberOfRows());
});
dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});
<script src="https://www.google.com/jsapi"></script>
<div id="string_filter_div"></div>
<div id="numnber_range_filter_div"></div>
<div id="table_div"></div>
我已经在 Google 可视化 Table 中为多个过滤器实现了各种控件:CategoryFilter、StringFilter 和 NumberRangeFilter 就像这个例子 http://jsfiddle.net/asgallant/Ena84/
是否可以知道每个过滤器设置后 table 中可视化的行数? 谢谢。
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Team');
data.addColumn('string', 'Nationality');
data.addColumn('number', 'Height');
data.addColumn('number', 'Weight');
data.addColumn('number', 'OverallRating');
data.addColumn('string', 'Foot');
data.addRows([
['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot'],
['A. INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot'],
['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot']
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var stringFilter = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'string_filter_div',
options: {
filterColumnIndex: 0
}
});
var numberRangeFilter = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'numnber_range_filter_div',
options: {
filterColumnIndex: 5,
minValue: 0,
maxValue: 100,
ui: {
label: 'Overall Rating'
}
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: true
}
});
dashboard.bind([stringFilter, numberRangeFilter], [table]);
dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});
一旦 'ready'
事件在任何控件、图表或仪表板上触发
您可以在任何控件或图表上使用 getDataTable
方法
到getNumberOfRows
请参阅以下工作片段...
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Team');
data.addColumn('string', 'Nationality');
data.addColumn('number', 'Height');
data.addColumn('number', 'Weight');
data.addColumn('number', 'OverallRating');
data.addColumn('string', 'Foot');
data.addRows([
['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot'],
['A. INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot'],
['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot']
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var stringFilter = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'string_filter_div',
options: {
filterColumnIndex: 0
}
});
var numberRangeFilter = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'numnber_range_filter_div',
options: {
filterColumnIndex: 5,
minValue: 0,
maxValue: 100,
ui: {
label: 'Overall Rating'
}
}
});
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
options: {
showRowNumber: true
}
});
dashboard.bind([stringFilter, numberRangeFilter], [table]);
google.visualization.events.addListener(dashboard, 'ready', function () {
// get number of rows
console.log(table.getDataTable().getNumberOfRows());
});
dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});
<script src="https://www.google.com/jsapi"></script>
<div id="string_filter_div"></div>
<div id="numnber_range_filter_div"></div>
<div id="table_div"></div>