2012-07-05 81 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