Ich habe das Problem beim Erstellen von Triple-Y-Achse konfrontiert

Question

Ich habe das Problem bei der Erstellung von Triple-Y-Achse in Google-Charts konfrontiert. Das Problem ist der Abstand zwischen der rechten Achse. Kannst du mir bitte Helfen.

Ich habe das folgende Code-Snippet bereitgestellt. Im Ergebnis werden die rechten y-Achsen zusammengeführt. Könntest du bereitstellen, wie man Platz/Lücke zwischen ihnen gibt, um gut auszusehen? Danke

google.charts.load('current', {'packages':['line', 'corechart']}); 
 
     google.charts.setOnLoadCallback(drawChart); 
 

 
    function drawChart() { 
 

 
     
 

 
     var data = new google.visualization.DataTable(); 
 
     data.addColumn('date', 'Month'); 
 
     data.addColumn('number', "Average Temperature"); 
 
     data.addColumn('number', "Average Hours of Daylight"); 
 
\t \t \t data.addColumn('number', "Average 1"); 
 
     data.addColumn('number',"Average 2") 
 
     data.addRows([ 
 
     [new Date(2014, 0), -.5, 8.7,7,11], 
 
     [new Date(2014, 1), .4, 8.7,5,12], 
 
     [new Date(2014, 2), .5, 12,6,13], 
 
     [new Date(2014, 3), 2.9, 15.7,5,14], 
 
     [new Date(2014, 4), 6.3, 18.6,8,15], 
 
     [new Date(2014, 5), 9, 20.9,8,16], 
 
     [new Date(2014, 6), 10.6, 19.8,9,16], 
 
     [new Date(2014, 7), 10.3, 16.6,7,15], 
 
     [new Date(2014, 8), 7.4, 13.3,8,14], 
 
     [new Date(2014, 9), 4.4, 9.9,12,13], 
 
     [new Date(2014, 10), 1.1, 6.6,11,12], 
 
     [new Date(2014, 11), -.2, 4.5,11,11] 
 
     ]); 
 

 
    
 

 
     var classicOptions = { 
 
     title: 'Average Temperatures and Daylight in Iceland Throughout the Year', 
 
     width: 900, 
 
     height: 500, 
 
     // Gives each series an axis that matches the vAxes number below. 
 
     series: { 
 
      0: {targetAxisIndex: 0}, 
 
      1: {targetAxisIndex: 1}, 
 
      2: {targetAxisIndex: 2}, 
 
      3: {targetAxisIndex: 3} 
 
     }, 
 
     vAxes: { 
 
      // Adds titles to each axis. 
 
      0: {title: 'Temps (Celsius)'}, 
 
      1: {title: 'Daylight'}, 
 
      2: {title: 'third'}, 
 
      3: {title: 'foruth'} 
 
     }, 
 
     hAxis: { 
 
      ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3), 
 
        new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7), 
 
        new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11) 
 
       ] 
 
     }, 
 
     vAxis: { 
 
      viewWindow: { 
 
      max: 30 
 
      } 
 
     } 
 
     }; 
 

 

 
     var classicChart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
     classicChart.draw(data, classicOptions); 
 

 
    }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <br><br> 
 
    <div id="chart_div"></div>

Answer 1

ich bin diese Funktion denken nicht mehr als zwei vAxes, gedacht war
obwohl funktioniert es scheint, gibt es keine Konfigurationsoptionen dieses

zu handhaben

wenn Sie drei haben müssen, versuchen textPosition

haben eine 'in' und die andere

'out'

siehe folgende Beispiel ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Month'); 
 
    data.addColumn('number', "Average Temperature"); 
 
    data.addColumn('number', "Average Hours of Daylight"); 
 
    data.addColumn('number', "Average 1"); 
 
    data.addColumn('number',"Average 2") 
 
    data.addRows([ 
 
     [new Date(2014, 0), -.5, 8.7,7,11], 
 
     [new Date(2014, 1), .4, 8.7,5,12], 
 
     [new Date(2014, 2), .5, 12,6,13], 
 
     [new Date(2014, 3), 2.9, 15.7,5,14], 
 
     [new Date(2014, 4), 6.3, 18.6,8,15], 
 
     [new Date(2014, 5), 9, 20.9,8,16], 
 
     [new Date(2014, 6), 10.6, 19.8,9,16], 
 
     [new Date(2014, 7), 10.3, 16.6,7,15], 
 
     [new Date(2014, 8), 7.4, 13.3,8,14], 
 
     [new Date(2014, 9), 4.4, 9.9,12,13], 
 
     [new Date(2014, 10), 1.1, 6.6,11,12], 
 
     [new Date(2014, 11), -.2, 4.5,11,11] 
 
    ]); 
 

 
    var classicOptions = { 
 
     title: 'Average Temperatures and Daylight in Iceland Throughout the Year', 
 
     width: 900, 
 
     height: 500, 
 
     chartArea: { 
 
     width: '50%' 
 
     }, 
 
     series: { 
 
     0: {targetAxisIndex: 0}, 
 
     1: {targetAxisIndex: 1}, 
 
     2: {targetAxisIndex: 2} 
 
     }, 
 
     vAxes: { 
 
     0: { 
 
      textPosition: 'out', 
 
      title: 'Temps (Celsius)' 
 
     }, 
 
     1: { 
 
      textPosition: 'in', 
 
      title: 'Daylight', 
 
      viewWindow: { 
 
      max: 30 
 
      } 
 
     }, 
 
     2: { 
 
      textPosition: 'out', 
 
      title: 'third', 
 
      viewWindow: { 
 
      max: 40 
 
      } 
 
     } 
 
     }, 
 
     hAxis: { 
 
     ticks: [ 
 
      new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3), 
 
      new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7), 
 
      new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11) 
 
     ] 
 
     }, 
 
    }; 
 

 
    var classicChart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    classicChart.draw(data, classicOptions); 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>