Javascript 谷歌图表次级轴线图_Javascript_Google Visualization

Javascript 谷歌图表次级轴线图

javascript google-visualization

Javascript 谷歌图表次级轴线图,javascript,google-visualization,Javascript,Google Visualization,我目前正在通过网络编辑学习一些谷歌图表，以扩大我的知识面，我遇到了一个无法回避的问题 <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1",

我目前正在通过网络编辑学习一些谷歌图表，以扩大我的知识面，我遇到了一个无法回避的问题

<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>


load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数drawChart（）{
var data=google.visualization.arrayToDataTable（[
[“年”、“德比”、“布里斯托尔”、“沃林顿”、“印第安纳波利斯”、“达勒维茨”、“蒙特利尔”]，
['2012'，143754.007607.59958.516029.1213605.12586.00]，//继续这里！！！！！
['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]        
]);          
变量选项={
标题：“按站点划分的每年CPU总小时数”，
hAxis:{title:'Year'，titleTextStyle:{color:'black'}
};          
var chart=new google.visualization.AreaChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}

我想做的是在次轴（右轴）上获取Derby的数据，但是通过API我看不到如何实现它

要使用多轴，您需要在选项中设置轴值，声明有多个轴，以及“序列”属性，以指示哪个序列指向哪个轴。实现这一点的代码是将您的选项替换为

 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
    ]
 };

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

谢谢alex，我回到电脑前会尝试一下，我也很好奇，想知道如何在同一个网页上显示多个像上面那样的图形？当我尝试时，它只显示一个？