javascript - 谷歌图表 vAxis

Question

我在对象 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坐标的位置或者取彼此的距离，这样数据才不会相互堆叠？我可以这样得到它吗？

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>