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

我的猜测是，你需要

xAxis: { 
      type: 'datetime' 
     }, 

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

Answer 2

这可以帮助你，你有可能指定x轴一个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 
    });