Google图表辅助轴折线图

Question

I'm currently learning a bit of google charts with web editting to broaden my knowledge and I'm having a issue I can't get around. 我目前正在通过网络编辑来学习一些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>

What I'm trying to do is get Derby's data on the secondary axis (the right axis), but looking through the API I cant see how to implement it. 我想要做的是在辅助轴（右轴）上获取Derby的数据，但是通过API查看时，我看不到如何实现它。

Answer 1

To use multi axis you need to set the Axes values in your options, to declare that there is more than one axis, and the Series property, to indicate what series goes to which axis. 要使用多轴，您需要在选项中设置“轴”值，以声明存在多个轴，并需要使用“系列”属性来指示哪个系列到达哪个轴。 The code to make this happen is to replace your options with 实现此目的的代码是将您的选项替换为

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

If you are doing this you need to make sure that the graph is an honest one, the change from one axis to two axis seriously changes the impression that the graph can give to the audience and can be used as a way of lying with statistics. 如果要执行此操作，则需要确保该图是一个诚实的图，从一个轴更改为两个轴会严重改变该图可以给受众的印象，并可以用作统计的一种方式。

Google图表辅助轴折线图

问题描述

1 个解决方案

解决方案1
6 已采纳 2012-07-06 08:36:01

Google图表辅助轴折线图

问题描述

1 个解决方案

解决方案1 6 已采纳 2012-07-06 08:36:01

解决方案1
6 已采纳 2012-07-06 08:36:01