我在创建三重Y轴时遇到了这个问题 [英] i have faced the issue while creating triple y-axis

查看：117
本文介绍了我在创建三重Y轴时遇到了这个问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



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

google.charts.load（'current'，{'packages'：['line'， 'corechart']}）; google.charts.setOnLoadCallback（drawChart）;函数drawChart（）{var data = new google.visualization.DataTable（）; data.addColumn（'date'，'Month'）; data.addColumn（'数字'，平均温度）; data.addColumn（'数字'，'平均时间小时数'）; 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， [新日期（2014,2），.5,12,6,13]，[新日期（2014,3），2.9,15.7,5,14]，[新日期（2014， 4），6.3,18.6,8,15]，[新日期（2014,5），9,20.9,8,16]，[新日期（2014,6），10.6,19.8,9,16]，[新日期（2014,7），10.3,16.6,7,15]，[新日期（2014,8），7.4,13.3,8,14]，[新日期（2014,9），4.4,9.9,12,13 ]，[新日期（2014,10），1.1,6.6,11,12]，[新日期（2014,11），-2,4.5,11,11]]）; var classicOptions = {title：'全年冰岛的平均温度和日光'，宽度：900，高度：500，//给每个系列一个与下面的vAxes数字相匹配的轴。系列：{0：{targetAxisIndex：0}，1：{targetAxisIndex：1}，2：{targetAxisIndex：2}，3：{targetAxisIndex：3}}，vAxes：{//向每个轴添加标题。 0：{title：'Temps（Celsius）'}，1：{title：'Daylight'}，2：{title：'third'}，3：{title：'foruth'}}，hAxis：{ticks：[新日期（2014，4），新日期（2014，5），新日期（2014，1），新日期（2014，2），新日期（2014，6），新日期（2014，7），新日期（2014,8），新日期（2014，9），新日期（2014，10），新日期（2014,11）]}，vAxis： {viewWindow：{max：30}}}; var classicChart = new google.visualization.LineChart（document.getElementById（'chart_div'））; classicChart.draw（data，classicOptions）; } 

 < script type =text / javascriptsrc = https://www.gstatic.com/charts/loader.js >< /脚本> <峰; br><峰; br> < div id =chart_div>< / div>


我认为这个功能的目的不超过两个 vAxes ，

，尽管它确实似乎工作，没有任何配置选项来处理这个



如果您必须有三个，请尝试 textPosition



在中有一个'，另一个'out'

见下面的例子...
$ b $ p

jsdata-hide =falsedata-console =true>

google.charts.load（'current'，{callback：function（）{var data = new google.visualization.DataTable（）; data.addColumn（'date'，'Month'）; data.addColumn（'number' ，平均温度）; data.addColumn（'数字'，'平均小时数'）; data.addColumn（'数字'，'平均1'）; data.addColumn（'number'，'Average 2'）data.addRows（[[new Date（2014，0），-.5，8.7,7,11]，[new Date（2014,1），.4， [新日期（2014,2），.5,12,6,13]，[新日期（2014,3），2.9,15.7,5,14]，[新日期（2014， 4），6.3,18.6,8,15]，[新日期（2014,5），9,20.9,8,16]，[新日期（2014,6），10.6,19.8,9,16]，[新日期（2014,7），10.3,16.6,7,15]，[新日期（2014,8），7.4,13.3,8,14]，[新日期（2014,9），4.4,9.9,12,13 ]，[新日期（2014,10），1.1,6.6,11,12]，[新日期（2014,11），-2,4.5,11,11]]）; var classicOptions = {title：'冰岛全年的平均温度和日光'，宽度：900，高度：500，chartArea：{width：'50％'}，系列：{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），新日期（2014，1），新日期（2014,2），新日期（2014,3），新日期（2014,4），新日期（2014,5），新日期（2014,6），新日期（2014,7），新日期（2014,8），新日期（2014,9），新日期（2014,10），新日期（2014,11）] }，}; var classicChart = new google.visualization.LineChart（document.getElementById（'chart_div'））; classicChart.draw（data，classicOptions）; }，packages：['corechart']}）;


i have faced the problem while creating triple y-axis in google charts . The problem is space between right side axis. could you please help me.

i provided the following code snippet. In result, right y-axes are merged .could you provide what is way to give space /gap between them to look good. Thank you

 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>

解决方案

i'm thinking this feature was intended for no more than two vAxes,
although it does appear to work, there aren't any config options to handle this

if you must have three, try textPosition

have one 'in' and the other 'out'

see following example...

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轴时遇到了这个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆