HighChart没有正确绘制数据

Question

嗨我正在使用高图表并且数据正常通过但是日期没有在x轴上传出，我在数据中有一个参数，格式正确的日期我想在上面使用它x轴和弹出窗口，但我知道我需要使用UTC日期时间来正确订购

https://imgur.com/32TyzvH

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

Answer 1

我的猜测是你需要

{{1}}

你的代码中的

。希望这会有所帮助。

Answer 2

这可以帮助您，您必须指定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
  });