谷歌图表辅助轴折线图

Google charts secondary axis line charts

本文关键字：折线图 谷歌      更新时间：2023-09-26

我目前正在学习一些带有网络编辑的谷歌图表，以拓宽我的知识，但我遇到了一个无法解决的问题。

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

若要使用多轴，需要在选项中设置 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
    ]
 };

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

相关文章：