將搜索查詢添加到Google可視化表

我已經使用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的玩家」？

來源

2013-08-26 PauloCot

你想要的是一個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/

來源

2013-08-26 18:58:30 asgallant

是的，這是夢幻般的感謝。但有一個問題：如何包含多個字符串和數字範圍過濾器？ – PauloCot

這個答案對我來說非常有用。它應該有更多的讚揚！ ;-) – dalloliogm

偉大的人它幫助了我 –

將搜索查詢添加到Google可視化表

回答

相關問題