在 Google 可视化表中计算过滤后的行数答案

【问题标题】：Count number of rows after filter in Google Visualisation Table在 Google 可视化表中计算过滤后的行数
【发布时间】：2017-01-26 12:29:35
【问题描述】：

我在 Google 可视化表中为多个过滤器实现了各种控件：CategoryFilter、StringFilter 和 NumberRangeFilter 就像这个例子 http://jsfiddle.net/asgallant/Ena84/

是否有可能知道每个过滤器设置后表格中可视化的行数？谢谢。

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});

【问题讨论】：

标签： google-visualization dashboard google-datatable

【解决方案1】：

一旦'ready' 事件在任何控件、图表或仪表板上触发

您可以在任何控件或图表上使用getDataTable 方法

到getNumberOfRows

请参阅以下工作 sn-p...

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>

【讨论】：