具有三重y轴的Google折线图

本文介绍了具有三重y轴的Google折线图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想创建一个谷歌折线图，在一个图表中显示温度，湿度和气压。 因此应该有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 } }，}）; 小提琴在这里： 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'}}}}）;}; < 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.rightthe 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折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！