6

次のコードを使用して、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 を超えるプレーヤーのみを表示する」などです。

4

1 に答える 1

13

必要なのは、 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/を参照

于 2013-08-26T18:58:30.333 に答える