谷歌图表vAxis

Question

我在对象vAxis中使用组合图表google在一个地方构建图形并显示我为每个图表设置颜色和名称：

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

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