2012-11-09 44 views
1

我是Google可視化的初學者。我製作了一個帶有Google可視化的儀表板。我的儀表板有一個在ChartWrapper的幫助下繪製的表格,我在字符串過濾器的幫助下通過其中一列過濾表格。請檢查下面我的劇本看怎麼樣Google可視化 - 突出顯示錶中的數據

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1.1', {packages: ['controls']}); 
    </script> 
    <script type="text/javascript"> 
     function drawVisualization() { 
     // Prepare the data. 
     var data = google.visualization.arrayToDataTable([ 
      ['Name', 'Age'], 
      ['Michael' , '17'], 
      ['Elisa', '17'], 
      ['Robert', '17'], 
      ['John', '17'], 
      ['Jessica', '18'], 
      ['Aaron', '19'], 
      ['Margareth', '17'], 
      ['Miranda', '15'] 
     ]); 

     // Define a StringFilter control for the 'Name' column 
     var stringFilter = new google.visualization.ControlWrapper({ 
      'controlType': 'StringFilter', 
      'containerId': 'control1', 
      'options': { 
      'filterColumnLabel': 'Name' 
      } 
     }); 

     // Define a table visualization 
     var table = new google.visualization.ChartWrapper({ 
      'chartType': 'Table', 
      'containerId': 'chart1', 
      'options': {'height': '13em', 'width': '20em'} 

     }); 

     // Create the dashboard. 
     var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')). 
      // Configure the string filter to affect the table contents 
      bind(stringFilter, table). 
      // Draw the dashboard 
      draw(data); 
     } 


     google.setOnLoadCallback(drawVisualization); 
    </script> 

的,但我想強調在表中「紅」的顏色,當一個人的年齡不等於17的所有行。所以任何人都可以幫助我做到這一點。

很多預先感謝

+0

這裏,添加格式器範圍https://developers.google.com/chart/interactive/docs/reference#colorformatter – jonaypelluz

回答

0

使用顏色格式化程序語法來指定您的範圍和樣式。

var formatter = new google.visualization.ColorFormat(); 
formatter.addRange(null, 17, 'white', 'red'); 
formatter.addRange(17, null, 'white', 'red'); 
formatter.format(data, 1); 

這將搜索從-∞到17和17到+∞的值,但不包括17,因爲它不包括在內。但是這隻會使單元格變色,而不是整行。您可以使用其他黑客技術對行中的其他單元格着色。