HighChart 未正确绘制数据

HighChart isn't plotting data correctly

本文关键字:绘制 数据 HighChart      更新时间:2023-09-26

嗨,我正在使用高图表,数据正常,但是日期没有在 x 轴上通过,我在 Data 中有一个格式正确的日期参数,我想在 x 轴和弹出窗口上使用它,但是我知道我需要使用 UTC 日期时间才能正确排序

https://i.stack.imgur.com/kU4M6.jpg

function buildAndUpdateTempChart() {
  $.getJSON('server/getReadings.php', function (data) {
    $('#chartContainer').highcharts('StockChart', {
      chart:{
        events: {
          load: function(){
                      // set up the updating of the chart each second
                      //debugger;
                      // var series = this.series[0];
                      // //console.log('data is: ' + data);
                      // for(var i = 0; i < data.length - 1; i++){
                      //     this.series[0].addPoint(data[i].temp, data[i].timestamp, true, true);
                      //     this.series[1].addPoint(data[i].aTemp, data[i].timestamp, true, true);
                      // }

                      // setInterval(function () {
                      //   //get tick
                      //     var x = (new Date()).getTime(), // current time
                      //     y = Math.round(Math.random() * 100);
                      //     series.addPoint([x, y], true, true);
                      //   }, 1000);
                    }
                  }
                },
                title: {
                  text: 'Temperature Sensor Readings'
                },
                yAxis: {
                  title: {
                    text: 'Degrees Celcius'
                  },
                  plotLines: [{
                    value: -10,
                    color: 'green',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                      text: 'Minimum tolerated.'
                    }
                  }, {
                    value: 20,
                    color: 'red',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                      text: 'Maximum tolerated.'
                    }
                  }]},
                  plotOptions: {
                    series: {
                      compare: 'percent'
                    }
                  },
                  series: [{
                    name: 'Temp',
                    data: (function () {
                      var temp = [];
                      for (var i = 0; i < data.length; i++) {
                        temp.push([
                          data[i].timestamp,
                          parseFloat(data[i].temp)
                          ]);
                      }
                      return temp;
                    }()),
                    tooltip: {
                      valueDecimals: 2
                    }},
                    {
                      name: 'Ambient Temp',
                      data: (function () {
                        var aTemp = [];
                        for (var i = 0; i < data.length; i++) {
                          aTemp.push([
                            data[i].timestamp,
                            parseFloat(data[i].aTemp)
                            ]);
                        }
                        return aTemp;
                      }()),
                      tooltip: {
                        valueDecimals: 2
                      },
                    }]
                  });
  })
}
$(document).ready(function(){
    buildAndUpdateTempChart(); //this is async so there rest of the app can continue to work
  });

我猜你需要

 xAxis: {
            type: 'datetime'
        },

在您的代码中。 希望这有帮助。

可以帮助您,您必须指定xAxis datetime

function buildAndUpdateTempChart() {
  $.getJSON('server/getReadings.php', function (data) {
    $('#chartContainer').highcharts('StockChart', {
      chart:{
        events: {
          load: function(){
                      // set up the updating of the chart each second
                      //debugger;
                      // var series = this.series[0];
                      // //console.log('data is: ' + data);
                      // for(var i = 0; i < data.length - 1; i++){
                      //     this.series[0].addPoint(data[i].temp, data[i].timestamp, true, true);
                      //     this.series[1].addPoint(data[i].aTemp, data[i].timestamp, true, true);
                      // }

                      // setInterval(function () {
                      //   //get tick
                      //     var x = (new Date()).getTime(), // current time
                      //     y = Math.round(Math.random() * 100);
                      //     series.addPoint([x, y], true, true);
                      //   }, 1000);
                    }
                  }
                },
                title: {
                  text: 'Temperature Sensor Readings'
                },
                 xAxis: {
                   type: 'datetime'
                },
                yAxis: {
                  title: {
                    text: 'Degrees Celcius'
                  },
                  plotLines: [{
                    value: -10,
                    color: 'green',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                      text: 'Minimum tolerated.'
                    }
                  }, {
                    value: 20,
                    color: 'red',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                      text: 'Maximum tolerated.'
                    }
                  }]},
                  plotOptions: {
                    series: {
                      compare: 'percent'
                    }
                  },
                  series: [{
                    name: 'Temp',
                    data: (function () {
                      var temp = [];
                      for (var i = 0; i < data.length; i++) {
                        temp.push([
                          data[i].timestamp,
                          parseFloat(data[i].temp)
                          ]);
                      }
                      return temp;
                    }()),
                    tooltip: {
                      valueDecimals: 2
                    }},
                    {
                      name: 'Ambient Temp',
                      data: (function () {
                        var aTemp = [];
                        for (var i = 0; i < data.length; i++) {
                          aTemp.push([
                            data[i].timestamp,
                            parseFloat(data[i].aTemp)
                            ]);
                        }
                        return aTemp;
                      }()),
                      tooltip: {
                        valueDecimals: 2
                      },
                    }]
                  });
  })
}
$(document).ready(function(){
    buildAndUpdateTempChart(); //this is async so there rest of the app can continue to work
  });