谷歌图表vAxis

我建立使用组合图表谷歌在对象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坐标的位置还是相互距离，以便数据不会相互叠加？我可以这样吗？

来源

2017-08-28 Neverovski Dmitry

在右侧轴之一，
集 - >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>

来源

2017-08-28 11:43:50 WhiteHat

我可以这样做吗？ [图]（http://joxi.ru/BA06yWJiBvowlm） –

对不起！更新后的问题 –

不相信通过标准配置选项是可能的 - 首先想到的是使用彼此相邻的多个图表，只在前两个显示轴 – WhiteHat

谷歌图表vAxis

回答

相关问题