具有三重y轴的Google折线图 [英] Google line chart with triple y-axis

问题描述

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

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

问题是第二个和第三个y轴在某种程度上重叠。

我只有到目前为止看到两个y轴的例子。三轴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 
} 
}，
}）; 
  

小提琴在这里：

< a href =https://jsfiddle.net/1b3hd0ya/2/ =nofollow noreferrer> https://jsfiddle.net/1b3hd0ya/2/

解决方案

你有正确的想法...

只有你可能考虑的其他东西才会给予右侧多一点工作空间，

例如

chartArea.right

材料图表可以更好地间隔多个轴标签，

但是使用的选项少得多 ...

请参阅以下工作代码段，其中包含两个...

  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,157,1001]，['D'，18,58,1010]，['E '，17,58,1010]，['F'，17,60,1012]，['G'，18,61,1013]，['H'，22,62,1010]，['我'， 24,62,1012]，['J'，20,62,1005]，['K'，17,60,1005]，['L'，17,158,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'}，湿度：{标签：'％rel'}，压力：{标签：'hPa'}}}}）;};  

<前级=snippet-code-html lang-html prettyprint-override> < script src =https://www.gstatic.com/charts/loader.js>< / script> < div id =visualization>< / div>< div id =visualization_matl>< / div>

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/

解决方案

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>

这篇关于具有三重y轴的Google折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！