cartes Google Vaxis

Question

Je construis graphiques et d'affichage dans un lieu à l'aide Combo Google Chart dans l'objet Vaxis je définir la couleur et le nom de chaque tableau:

vAxes: { 
    0: { 
     title:'График 1', 
     textStyle: {color: '#21C40A'}, 
     minorGridlines: {count: 2, color: '#ccc'}, 
     titleTextStyle: {color: '#21C40A'}, 
    }, 
    1: { 
     title:'График 2', 
     textStyle: {color: '#E89712'}, 
     minorGridlines: {count: 2, color: '#ccc'}, 
     titleTextStyle: {color: '#E89712'} 
    }, 
    2: { 
     title:'График 3', 
     textStyle: {color: '#390983'}, 
     minorGridlines: {count: 2, color: '#ccc'}, 
     titleTextStyle: {color: '#390983'} 
    } 
} 

La question est de savoir comment vous pouvez spécifier la position de la coordonnée y ou prendre la distance les uns des autres afin que les données ne s'empilent pas les unes sur les autres? Puis-je l'obtenir de cette façon?

Answer 1

sur l'un des axes du côté droit,
set ->textPosition: 'in'

cela déplacera un à l'intérieur du tableau, sinon,
ils seront toujours empiler les uns sur les autres ...

voir suivant extrait de travail,
utilisent également chartArea.right pour permettre assez de place pour les étiquettes et les titres ...

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: '100%', 
 
     height: '100%', 
 
     chartArea: { 
 
     width: '100%', 
 
     height: '100%', 
 
     top: 72, 
 
     left: 60, 
 
     bottom: 48, 
 
     right: 84 
 
     }, 
 
     series: { 
 
     0: {targetAxisIndex: 0}, 
 
     1: {targetAxisIndex: 1}, 
 
     2: {targetAxisIndex: 2} 
 
     }, 
 
     vAxes: { 
 
     0: { 
 
      textPosition: 'out', 
 
      title: 'Temps (Celsius)' 
 
     }, 
 
     1: { 
 
      textPosition: 'out', 
 
      title: 'Daylight', 
 
      viewWindow: { 
 
      max: 30 
 
      } 
 
     }, 
 
     2: { 
 
      textPosition: 'in', 
 
      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'] 
 
});

html, body, div { 
 
    height: 100%; 
 
}

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