2014-06-20 64 views
5

我對谷歌圖表比較新,所以請原諒我的無知;更改面積圖的填充和描邊顏色?

我正在查看面積圖,我想更改填充和描邊顏色。這裏是代碼...

<!-- 
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="//www.google.com/jsapi"></script> 
     <script type="text/javascript"> 
      google.load('visualization', '1', {packages: ['corechart']}); 
     </script> 
     <script type="text/javascript"> 

      function drawVisualization() { 
       // Some raw data (not necessarily accurate) 
       var data = google.visualization.arrayToDataTable([ 
        ['Month', 'Target'], 
        ['JAN', 85], 
        ['FEB', 105], 
        ['MAR', 65], 
        ['APR', 45], 
        ['MAY', 45], 
        ['JUN', 15], 
        ['JUL', 60] 
       ]); 

       // Create and draw the visualization. 
       var ac = new google.visualization.AreaChart(document.getElementById('visualization')); 
       ac.draw(data, { 
        title : '', 
        isStacked: true, 
        width: 600, 
        height: 400, 
        vAxis: {title: "Millions"}, 
        hAxis: {title: "Month"} 
       }); 
      } 

      google.setOnLoadCallback(drawVisualization); 
     </script> 
    </head> 
    <body style="font-family: Arial;border: 0 none;"> 
     <div id="visualization" style="width: 600px; height: 400px;"></div> 
    </body> 
</html> 

我的問題的另一部分是,我在哪裏可以找到定製谷歌圖表的完整參考?

謝謝,

回答

7

AreaChart中每個系列的填充和描邊顏色由系列顏色決定。

colors: ['#f36daa', 'blue', '#3fc26b'] 
:可以通過設置 colors選項(它取HTML顏色字符串數組,分配給在列順序數據系列)或經由 series.<series index>.color選項(它採用HTML顏色字符串設定數據系列的顏色

或:是(大部分)記載

series: { 
    0: { 
     // set options for the first data series 
     color: '#f36daa' 
    }, 
    1: { 
     // set options for the second data series 
     color: 'red' 
    }, 
    2: { 
     // set options for the third data series 
     color: '#3fc26b' 
    } 
} 

圖表選擇文檔中的特定圖。(例如:AreaChart)跨越多個圖表的某些功能是分開記錄的(例如:IntervalsTrendlinesDashboards and ControlsEvent HandlersAnimations)。在API Reference中記錄了數據結構,數據操作,格式化和相關類。