2012-07-05 2 views
4

현재 지식을 넓히기 위해 웹 편집 기능이있는 약간의 Google 차트를 배우고 있으며 나는 주변을 둘러 볼 수없는 문제가 있습니다. 내가 할 노력하고있어Google 차트 보조 축선 차트

<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