Question

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

我提供了以下代码段。结果，右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>

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

1 个答案: