问题描述
我正在尝试使用esp8266建立一个简单的气象站,然后绘制并以图表形式显示获得的数据。我正在尝试将HighCharts用于此任务。现在,我遇到了一个问题,HighCharts不会在图形上添加新点。
我的代码:
<!DOCTYPE html>
<html>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<style>
body {
min-width: 310px;
max-width: 1280px;
height: 500px;
margin: 0 auto;
}
h2 {
font-family: Arial;
font-size: 2.5rem;
text-align: center;
}
</style>
<body>
<h2>ESP Weather Station</h2>
<div id="chart-temperature" class="container"></div>
<div id="chart-humidity" class="container"></div>
<div id="chart-pressure" class="container"></div>
<script>
var value1 = <?PHP echo $value1; ?>;
var value2 = <?PHP echo $value2; ?>;
var value3 = <?PHP echo $value3; ?>;
var reading_time = <?PHP echo $reading_time; ?>;
var chartT = new Highcharts.Chart({
chart:{ renderTo : 'chart-temperature' },title: { text: 'BME280 Temperature' },series: [{
showInLegend: false,data: value1
}],plotOptions: {
line: { animation: false,dataLabels: { enabled: true }
},series: { color: '#059e8a' }
},xAxis: {
type: 'datetime',categories: reading_time
},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 > 4) {
chartT.series[0].addPoint([x,y],true,true);
} else {
chartT.series[0].addPoint([x,true);
}
}
};
xhttp.open("GET","/esp-chart.PHP",true);
xhttp.send();
},3000 ) ;
var chartH = new Highcharts.Chart({
chart:{ renderTo:'chart-humidity' },title: { text: 'BME280 Humidity' },data: value2
}],dataLabels: { enabled: true }
}
},xAxis: {
type: 'datetime',//dateTimeLabelFormats: { second: '%H:%M:%s' },yAxis: {
title: { text: 'Humidity (%)' }
},credits: { enabled: false }
});
var chartP = new Highcharts.Chart({
chart:{ renderTo:'chart-pressure' },title: { text: 'BME280 Pressure' },data: value3
}],series: { color: '#18009c' }
},yAxis: {
title: { text: 'Pressure (hPa)' }
},credits: { enabled: false },});
</script>
</body>
</html>
现在,我正尝试在温度图中添加一个新点,而忽略湿度和压力。这就是我所得到的,关键是要不断地重新加载。重新加载页面时,我看到的是通常隔开的点,但是过了一会儿,它移动到了一个点,如图所示。有什么方法可以连续绘制数据吗?
解决方法
我试图重述您的案子以理解问题,这是我的结论:
-
不要在
addPoint
功能中使用true标志进行移位-它会删除上一个点-https://api.highcharts.com/class-reference/Highcharts.Series#addPoint -
您已将
xAxis
类型定义为'datatime'并尝试分配类别-这也是一个错误。类别类型是另一回事。xAxis: { type: 'datetime',categories: reading_time },