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>

我想要做的是在辅助轴（右轴）上获取 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
    ]
 };

如果你这样做，你需要确保图表是诚实的，从一个轴到两个轴的变化严重改变了图表给观众的印象，可以用作一种撒谎的统计方式。

于 2012-07-06T08:36:01.130 回答