Google line chart with triple y-axis

问题:

I want to create a Google line chart to display temperature, humidity and air pressure all in one chart.

Because of that there should be 3 y-axes with different ranges.

The problem is that the second and third y-axis somehow overlap.

I have only seen examples with two y-axes so far. Is triple y-axes possible at all? Would it help if I chose material opposed to the classic variant?

My chart setup is here:

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
                }
            },
        });

The fiddle is here:

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

回答1:

you've got the right idea...

only other thing you might consider would be giving the right side a little more room to work with,
e.g.

chartArea.right

the material chart does a better job of spacing multiple axis labels,
but there are far fewer options to work with...

see following working snippet, which draws both...

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>

回答2:

I could cheat to make the axes visible by moving (textPosition) one of them in and the other one 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
    }
}

Updated fiddle: https://jsfiddle.net/1b3hd0ya/3/