谷歌圖表vAxis

Question

我建立使用組合圖表谷歌在對象vAxis我設置爲每個圖表的顏色和名稱在一個地方圖形和顯示：

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'} 
    } 
} 

問題是你怎麼能指定y座標的位置還是相互距離，以便數據不會相互疊加？ 我可以這樣嗎？

Answer 1

在右側軸之一，
集 - >textPosition: 'in'

這將移動一個在圖表內，否則，
它們將總是在彼此的頂部堆疊...

看到下面的工作片段，
也使用chartArea.right允許足夠的空間標籤和標題...

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>