HighCharts不会添加新的积分

如何解决HighCharts不会添加新的积分

我正在尝试使用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
},
```

演示：https://jsfiddle.net/BlackLabel/45Ltwbcx/