我在创建三重 y 轴时遇到了这个问题

Question

我在谷歌图表中创建三重 y 轴时遇到了这个问题。 问题是右侧轴之间的空间。你能帮帮我吗？

我提供了以下代码 sn-p。结果，正确的 y 轴被合并了。你能提供什么方法​​让它们之间的空间/间隙看起来不错。谢谢

 google.charts.load('current', {'packages':['line', 'corechart']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      

      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: 900,
        height: 500,
        // Gives each series an axis that matches the vAxes number below.
        series: {
          0: {targetAxisIndex: 0},
          1: {targetAxisIndex: 1},
          2: {targetAxisIndex: 2},
          3: {targetAxisIndex: 3}
        },
        vAxes: {
          // Adds titles to each axis.
          0: {title: 'Temps (Celsius)'},
          1: {title: 'Daylight'},
          2: {title: 'third'},
          3: {title: 'foruth'}
        },
        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)
                 ]
        },
        vAxis: {
          viewWindow: {
            max: 30
          }
        }
      };


        var classicChart = new google.visualization.LineChart(document.getElementById('chart_div'));
        classicChart.draw(data, classicOptions);

    }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <br><br>
  <div id="chart_div"></div>

Answer 1

我认为此功能仅适用于两个 vAxes，
虽然它看起来确实有效，但没有任何配置选项来处理这个

如果你必须拥有三个，试试textPosition

有一个'in' 和另一个'out'

看下面的例子...

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: 900,
      height: 500,
      chartArea: {
        width: '50%'
      },
      series: {
        0: {targetAxisIndex: 0},
        1: {targetAxisIndex: 1},
        2: {targetAxisIndex: 2}
      },
      vAxes: {
        0: {
          textPosition: 'out',
          title: 'Temps (Celsius)'
        },
        1: {
          textPosition: 'in',
          title: 'Daylight',
          viewWindow: {
            max: 30
          }
        },
        2: {
          textPosition: 'out',
          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']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>