私はトリプルy軸を作成中に問題に直面しました

Question

私は、Googleのチャートでトリプル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"); 
 
\t \t \t 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

私はこの機能を考えているより多くない2 vAxes、
のために意図されていた感謝この

を処理するために、任意の設定オプションがありません

次の3つを持っている必要がある場合、1 'in'およびその他を持ってtextPosition

を試してみてください'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>