我可以在两个xhttp变量之间做一个图吗?

Question

我试着在两个变量之间画一个图，而不是画时间，但我不能。顺便问一下，我想知道这个是否可用?

var chartT = new Highcharts.Chart({
chart: { renderTo: "chart-temperature" },
title: { text: "DHT22 Temperature" },
series: [
{
showInLegend: false,
data: [],
},
],
plotOptions: {
line: { animation: false, dataLabels: { enabled: true } },
series: { color: "#059e8a" },
},
xAxis: { type: "datetime", dateTimeLabelFormats: { second: "%H:%M:%S" } },
yAxis: {
title: { text: "Temperature (Celsius)" },
//title: { text: 'Temperature (Fahrenheit)' }
},
credits: { enabled: false },
});
setInterval(function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var x = new Date().getTime(),
y = parseFloat(this.responseText);
//console.log(this.responseText);
if (chartT.series[0].data.length > 40) {
chartT.series[0].addPoint([x, y], true, true, true);
} else {
chartT.series[0].addPoint([x, y], true, false, true);
}
}
};
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 30000);
var chartH = new Highcharts.Chart({
chart: { renderTo: "chart-humidity" },
title: { text: "DHT22 Humidity" },
series: [
{
showInLegend: false,
data: [],
},
],
plotOptions: {
line: { animation: false, dataLabels: { enabled: true } },
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: { second: "%H:%M:%S" },
},
yAxis: {
title: { text: "Humidity (%)" },
},
credits: { enabled: false },
});
setInterval(function () {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var x = new Date().getTime(),
y = parseFloat(this.responseText);
//console.log(this.responseText);
if (chartH.series[0].data.length > 40) {
chartH.series[0].addPoint([x, y], true, true, true);
} else {
chartH.series[0].addPoint([x, y], true, false, true);
}
}
};
xhttp.open("GET", "/humidity", true);
xhttp.send();
}, 30000);

我想做一个y轴上的湿度和x轴上的温度的曲线图。我试着改变湿度图的x变量，使之像温度图的y变量一样，但是湿度图不起作用。

Answer 1

必须同步从两个API请求接收到的数据。这是一个解决方案，记录部分数据(温度或湿度)-pending数组，并通过注册请求-tRequest的时间来识别相应的请求。

这可能是您更详细的解决方案的起点。如果这不是你想要的，请告诉我。

数据是模拟的(随机点)，因为我没有访问您的API，但有真正的xmlhttprequest(到cdn上的highcharts)。

此处同

var chartT = new Highcharts.Chart({
chart: { renderTo: "chart-temperature" },
title: { text: "DHT22 Temperature" },
series: [
{
showInLegend: false,
data: [],
},
],
plotOptions: {
line: { animation: false, dataLabels: { enabled: true } },
series: { color: "#059e8a" },
},
xAxis: { type: "datetime", dateTimeLabelFormats: { second: "%H:%M:%S" } },
yAxis: {
title: { text: "Temperature (Celsius)" },
//title: { text: 'Temperature (Fahrenheit)' }
},
credits: { enabled: false },
});
var chartH = new Highcharts.Chart({
chart: { renderTo: "chart-humidity" },
title: { text: "DHT22 Humidity" },
series: [
{
showInLegend: false,
data: [],
},
],
plotOptions: {
line: { animation: false, dataLabels: { enabled: true } },
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: { second: "%H:%M:%S" },
},
yAxis: {
title: { text: "Humidity (%)" },
},
credits: { enabled: false },
});
var chartTH = new Highcharts.Chart({
chart: { renderTo: "chart-temperature-humidity", type: "scatter" },
title: { text: "DHT22 Humidity vs Temperature" },
series: [
{
showInLegend: false,
data: [],
},
],
plotOptions: {
//line: { animation: false, dataLabels: { enabled: true } },
scatter: {marker: {fillColor: '#ce4a05'}}
},
xAxis: {
title: { text: "Temperature (Celsius)" },
},
yAxis: {
title: { text: "Humidity (%)" },
},
credits: { enabled: false },
});

function requestTemperature(whenReceived) { // whenReceived is a handler to be called when a data point was received
var tRequest = new Date().getTime();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var x = new Date().getTime(),
y = Math.floor(Math.random()*100)/4;//parseFloat(this.responseText);
whenReceived(x, y, tRequest);
}
};
xhttp.open("GET", "https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.2/highcharts.js", true);
xhttp.send();
}
function requestHumidity(whenReceived) {
var tRequest = new Date().getTime();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var x = new Date().getTime(),
y = Math.floor(100+Math.random()*250)/4;//parseFloat(this.responseText);
whenReceived(x, y, tRequest);
}
};
xhttp.open("GET", "https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.2/highcharts.js", true);
xhttp.send();
}
function addToChart(chart, [x, y]){
if (chart.series[0].data.length > 40) {
chart.series[0].addPoint([x, y], true, true, true);
} else {
chart.series[0].addPoint([x, y], true, false, true);
}
}
var pending = []; // pending array will contain values received for only one of the variables
function afterTemperatureReceived(x, y, tRequest){
addToChart(chartT, [x, y]);
var humidityReceived = pending.findIndex(o => Math.abs(o.tRequest - tRequest) < 100);
if(humidityReceived >= 0){ // a humidity value was received with a call time very close to this
var H = pending.splice(humidityReceived, 1)[0].H; // delete from pending and retain H value
addToChart(chartTH, [y, H]); // current y is temp, the first (x) coordinate of chartTH
}
else{ // humidity not yet received
// add temperature to pending, waiting for its  humidity to be received
pending.push({T: y, tRequest});
}
}
function afterHumidityReceived(x, y, tRequest){
addToChart(chartH, [x, y]);
var temperatureReceived = pending.findIndex(o => Math.abs(o.tRequest - tRequest) < 100);
if(temperatureReceived >= 0){ // a temperature value was received with a call time very close to this
var T = pending.splice(temperatureReceived, 1)[0].T; // delete from pending and retain T value
addToChart(chartTH, [T, y]); // current y is humidity, the second (y) coordinate of  chartTH
}
else{ // temperature not yet received
// add humidity to pending, waiting for its  humidity to be received
pending.push({H: y, tRequest});
}
}
function mainTick(){
requestTemperature(afterTemperatureReceived);
requestHumidity(afterHumidityReceived);
}
mainTick();
setInterval(mainTick, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.2/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="chart-temperature" style="height:20vh;min-height:350px"></div>
<div id="chart-humidity" style="height:20vh;min-height:350px"></div>
<div id="chart-temperature-humidity" style="height:20vh;min-height:350px"></div>