2012-07-05 50 views
4

我目前正在學習一點谷歌圖表與網絡編輯,以擴大我的知識,我有我無法解決的問題。谷歌排行榜次軸線折線圖

<html> 
<head>  
<script type="text/javascript" src="https://www.google.com/jsapi"></script>  
<script type="text/javascript">  
google.load("visualization", "1", {packages:["corechart"]});  
google.setOnLoadCallback(drawChart);  
function drawChart() {   
var data = google.visualization.arrayToDataTable([   
['Year', 'Derby', 'Bristol', 'Warrington', 'Indianapolis', 'Dahlewitz', 'Montreal'],   
['2012', 143754.00 , 7607.59, 958.51, 6029.12 , 13605.12, 586.00], //continue here!!!!!   
['2013', 186065.32, 1674.50, 1823.93, 9574.24, 23935.14, 743.43],   
['2014', 251238.53, 0, 0, 10154.41, 19926.63, 363.71],   
['2015', 323134.57, 0, 0, 10400.66, 12002.84, 555.86], 
['2016', 467058.18, 0, 0, 10529.27, 5844.90, 0] , 
['2017', 391209.43, 0, 0, 11072.43, 3603.65, 0] , 
['2018', 460257.40, 0, 0, 12031.69, 1833.52, 0] , 
['2019', 744114.34, 0, 0, 13012.83, 1517.89, 0] , 
['2020', 1484193.59,0, 0, 14274.78, 1292.55, 0]   
]);   




var options = {   
title: 'Total CPU Hours Per Year By Site',   
hAxis: {title: 'Year', titleTextStyle: {color: 'black'}} 

};   

var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));   
    chart.draw(data, options);  
    }  
    </script> 
    </head> 
    <body>  
    <div id="chart_div" style="width: 900px; height: 500px;"></div> 
    </body> 
    </html> 

我想要做的就是在次軸(右軸)德比的數據,而是通過API找我不能看到如何實現它。

回答

6

要使用多軸,您需要在選項中設置軸值,以聲明有多個軸,並使用Series屬性來指示哪些軸會進入哪個軸。要做到這一點的代碼是

var options = {   
    title: 'Total CPU Hours Per Year By Site',   
    hAxis: {title: 'Year', titleTextStyle: {color: 'black'}} , 
    series:[ 
       {targetAxisIndex:1}, 
       {targetAxisIndex:0}, 
       {targetAxisIndex:0}, 
       {targetAxisIndex:0}, 
       {targetAxisIndex:0}, 
       {targetAxisIndex:0} 
    ], 
    vAxes:[ 
     {}, // Left axis 
     {} // Right axis 
    ] 
}; 

如果你這樣做,你需要確保該圖形是一個誠實的一個,從一軸兩軸的變化來代替你的選擇嚴重改變的印象,該圖可以給觀衆並且可以用作一種用統計數據說謊的方式。

+0

謝謝亞歷克斯,當我回到我的電腦時,我會告訴你,我也很感興趣,並期待找到如何顯示多個圖形,就像我上面在同一個網頁上顯示的那樣?因爲當我嘗試它只顯示一個? – Zenaphor 2012-07-06 10:48:59