javascript - Google图表vAxis

我在对象vAxis中使用Combo Chart 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坐标的位置或彼此之间的距离，以便数据不会彼此堆叠？
我可以这样吗？

最佳答案

在右侧轴之一上，
设置-> 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>

关于javascript - Google图表vAxis，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45914683/