javascript - 将搜索查询添加到 Google 可视化表

我使用以下代码使用 Google 可视化创建了一个数据库。

这是 html 版本:

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      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 table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
</html>

这是 Javascript 代码版本:

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['table']});
    </script>
    <script type="text/javascript">
    <html>
      <head>
        <script type='text/javascript' src='https://www.google.com/jsapi'></script>
        <script type='text/javascript'>
          google.load('visualization', '1', {packages:['table']});
          google.setOnLoadCallback(drawTable);
          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 table = new google.visualization.Table(document.getElementById('table_div'));
            table.draw(data, {showRowNumber: true});
          }
        </script>
      </head>

      <body>
        <div id='table_div'></div>
      </body>
    </html>

    google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="table"></div>
  </body>
</html>

我的问题是如何在页面顶部插入一个搜索框，让用户可以通过输入玩家姓名来搜索玩家？比这更好的是，我怎样才能实现一个搜索功能，该功能将根据某些列超过一定数量来显示结果，例如“只显示总评分在 80 以上的玩家”？

最佳答案

你想要的是一个Dashboard用StringFilter Control和一个 NumberRangeFilter Control :

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.querySelector('#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});

参见 http://jsfiddle.net/asgallant/Ena84/

关于javascript - 将搜索查询添加到 Google 可视化表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18447181/

javascript - 将搜索查询添加到 Google 可视化表

上一篇：mysql - phpMyAdmin 4.0.5 导出错误错误 - 有人知道它是否正在解决吗？

下一篇：mysql - 选择sql表的最后3行