具有三重y轴的Google折线图

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

我想创建一个Google折线图,在一个图表中显示温度,湿度和气压。

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

因此,应该有3个不同范围的y轴。

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

问题是第二和第三y轴以某种方式重叠。

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?

到目前为止,我只看过两个y轴的例子。三轴y轴是否可行?如果我选择与经典变体相对的材料会有帮助吗?

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/

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:

我可以通过移动(textPosition)其中一个而另一个移出来欺骗使轴可见:

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/

更新小提琴:https://jsfiddle.net/1b3hd0ya/3/

#1