2014-10-31 190 views
0

我想在我的新網站項目中使用谷歌折線圖。我想對它們進行設計,就像下面第二張圖表中的下圖所示。谷歌折線圖

你能告訴我如何做到這一點,如果有可能?

這是生成上面的圖表代碼(我有意刪除一些數據,以使代碼更小) 。

<script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Date', 'Server load'], 
      ['Wed Oct 29 08:56:08 CDT 2014', 3.11], 
      ['Wed Oct 29 09:04:02 CDT 2014', 1.66], 
      ['Wed Oct 29 09:08:02 CDT 2014', 2.76], 
      ['Wed Oct 29 09:12:04 CDT 2014', 4.46], 
      ['Fri Oct 31 10:16:03 CDT 2014', 0.52], 
      ['Fri Oct 31 10:20:02 CDT 2014', 0.36], 
      ['Fri Oct 31 10:24:02 CDT 2014', 0.25] 
     ]); 

     var options = { 
      title: 'Server load (48 hours)', 
      curveType: 'function', 
      vAxis: {minValue:0}, 
      backgroundColor: '#F2F9FF', 
      explorer: { actions: ['dragToZoom', 'rightClickToReset'] }, 
      fontName: 'Verdana', 
      legend: 'none' 
     }; 

     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 

     chart.draw(data, options); 
     } 
    </script> 
    <div id="chart_div" style="width: 950px; height: 180px;"></div> 

enter image description here

回答

0

您可以用backgroundColor.stroke應用邊界。看起來,hAxis可以用來設計你的日期。您可以使用chg參數在統計圖上指定實線或虛線網格線。此參數不允許您指定線條的粗細或顏色。有關在圖表上生成線條的更多方法,請參閱形狀標記(chm類型h,H,v或V),範圍標記(chm)和軸刻度線(chxtc)。