谷歌图表次级轴线图表(Google charts secondary axis line chart

2019-09-19 03:16发布

目前,我正在学习一点谷歌图表与网络编辑工作,以扩大我的知识,我有一个问题,我无法回避。

<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我不能看到如何实现它。

Answer 1:

要使用多轴您需要设置轴值在你的选择,宣称有不止一个轴,系列财产,以表示去哪个轴什么系列。 要做到这一点的代码来取代你的选择

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

如果你这样做,你需要确保该图形是一个诚实的一个,从一轴两轴的变化严重改变的印象图可以带给观众,并且可以用作与统计说谎的一种方式。



文章来源: Google charts secondary axis line charts