Googleの折れ線グラフ（y軸の3倍）

Question

Googleの折れ線グラフを作成して温度、湿度、気圧を1つのチャートに表示したいと考えています。

それゆえ、範囲が異なる3つのy軸があるはずです。

問題は、2番目と3番目のy軸がどういうわけか重なっていることです。

これまでの例では、y軸が2つしか見えませんでした。トリプルy軸はまったく可能ですか？古典的な変種に反する資料を選んだ場合、それは役に立ちますか？

私のチャートの設定はここにある：

new google.visualization.LineChart(document.getElementById('visualization')) 
     .draw(data, { 
      vAxes : [ { 
       title : 'Title 1', 
       minValue : 0, 
       maxValue : 20 
      }, { 
       title : 'Title 2', 
       minValue : 40, 
       maxValue : 80 
      }, { 
       title : 'Title 3', 
       minValue : 950, 
       maxValue : 1050 
      } ], 
      series : { 
       0 : { 
        targetAxisIndex : 0 
       }, 
       1 : { 
        targetAxisIndex : 1 
       }, 
       2 : { 
        targetAxisIndex : 2 
       } 
      }, 
     }); 

フィドルはここにある：

https://jsfiddle.net/1b3hd0ya/2/

Answer 1

...あなたが考えるかもしれません

唯一の他の事は右側にで動作するように少しより多くの部屋を与えることになり、
例えば

chartArea.right

材料チャートは、複数の軸ラベルの間隔のより良い仕事をしていません
しかしfar fewer options to work withがあります...

の両方を描く作業スニペットは、以下を参照してください...

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

 
function drawVisualization() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['x', 'Temperature', 'Humidity', 'Pressure'], 
 
    ['A', 5,  55,  1000], 
 
    ['B', 12,  57,  1001], 
 
    ['C', 14,  57,  1001], 
 
    ['D', 18,  58,  1010], 
 
    ['E', 17,  58,  1010], 
 
    ['F', 17,  60,  1012], 
 
    ['G', 18,  61,  1013], 
 
    ['H', 22,  62,  1010], 
 
    ['I', 24,  62,  1012], 
 
    ['J', 20,  62,  1005], 
 
    ['K', 17,  60,  1005], 
 
    ['L', 17,  58,  1004], 
 
    ['M', 16,  58,  1005], 
 
    ['N', 15,  57,  1003] 
 
    ]); 
 

 
    // classic 
 
    new google.visualization.LineChart(document.getElementById('visualization')). 
 
    draw(data, { 
 
     chartArea: { 
 
     right: 136 
 
     }, 
 
     curveType : 'function', 
 
     lineWidth : 2, 
 
     pointSize : 2, 
 
     vAxes: { 
 
     0: {title: '°C', textPosition: 'out', minValue: -10, maxValue: 25 }, 
 
     1: {title: '% rel', textPosition: 'in', minValue: 20, maxValue: 90 }, 
 
     2: {title: 'hPa', textPosition: 'out', minValue: 900, maxValue: 1100 } 
 
     }, 
 
     series:{ 
 
     0: {targetAxisIndex:0, color : 'blue'}, 
 
     1: {targetAxisIndex:1, color : 'red'}, 
 
     2: {targetAxisIndex:2, color : 'green'} 
 
     } 
 
    } 
 
); 
 

 
    // material 
 
    new google.charts.Line(document.getElementById('visualization_matl')). 
 
    draw(data, { 
 
     series: { 
 
     0: {axis: 'Temperature'}, 
 
     1: {axis: 'Humidity'}, 
 
     2: {axis: 'Pressure'} 
 
     }, 
 
     axes: { 
 
     y: { 
 
      Temperature: {label: '°C'}, 
 
      Humidity: {label: '% rel'}, 
 
      Pressure: {label: 'hPa'} 
 
     } 
 
     } 
 
    } 
 
); 
 
};

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

Answer 2

私は（textPosition）を移動することにより、軸が見えるようにごまかすことができ、これらの1 inと他のものout：

vAxes : { 
    0 : { 
     title : '°C', 
     textPosition : "out", 
     minValue : -10, 
     maxValue : 25 
    }, 
    1 : { 
     title : '% rel', 
     textPosition : "in", 
     minValue : 20, 
     maxValue : 90 
    }, 
    2 : { 
     title : 'hPa', 
     textPosition : "out", 
     minValue : 900, 
     maxValue : 1100 
    } 
} 

更新フィドル：あなたは正しい考えを持っているhttps://jsfiddle.net/1b3hd0ya/3/