4

私は現在、知識を広げるために Web 編集を使用して 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>

私がやろうとしているのは、第 2 軸 (右軸) で Derby のデータを取得することですが、API を見てみると、それを実装する方法がわかりません。

4

1 に答える 1

7

多軸を使用するには、オプションで Axes 値を設定し、複数の軸があることを宣言し、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
    ]
 };

これを行う場合、グラフが正直なものであることを確認する必要があります。1 つの軸から 2 つの軸への変更は、グラフが聴衆に与える印象を大きく変え、統計で嘘をつく方法として使用できます。

于 2012-07-06T08:36:01.130 に答える