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

2019-07-28 22:16:12 阅读：179 来源： 互联网

标签：javascript mysql search google-visualization

我使用以下代码使用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,mysql,search,google-visualization
来源： https://codeday.me/bug/20190728/1566029.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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