Pomoc w programowaniu, odpowiedzi na pytania / JavaScript / Wykres liniowy Google z potrójną osią Y - javascript, wykresy, wizualizacja Google

Wykres liniowy Google z potrójną osią Y - javascript, wykresy, wizualizacja Google

Chcę utworzyć wykres liniowy Google, aby wyświetlać temperaturę, wilgotność i ciśnienie powietrza na jednym wykresie.

Z tego powodu powinny istnieć 3 osie y o różnych zakresach.

Problem polega na tym, że druga i trzecia oś y w jakiś sposób się pokrywają.

Do tej pory widziałem tylko przykłady z dwiema osiami y. Czy w ogóle możliwe są potrójne osie y? Czy pomogłoby, gdybym wybrał materiał przeciwny do klasycznego wariantu?

Moja konfiguracja wykresu jest tutaj:

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

Fiddle jest tutaj:

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

Odpowiedzi:

1 dla odpowiedzi № 1

masz dobry pomysł ...

jedyną rzeczą, którą możesz wziąć pod uwagę, byłoby zapewnienie po prawej stronie trochę więcej miejsca do pracy,
na przykład

chartArea.right

temu materiał wykres lepiej radzi sobie z rozmieszczaniem etykiet wielu osi,
ale tutaj są znacznie mniej opcji do pracy...

zobacz następujący fragment roboczy, który rysuje oba ...

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>

1 dla odpowiedzi nr 2

Mógłbym oszukiwać, aby osi były widoczne, poruszając się (textPosition) jeden z nich in i kolejny 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
}
}

Zaktualizowano skrzypce: https://jsfiddle.net/1b3hd0ya/3/