来自JS日期的Highcharts X-Axis时间 [英] Highcharts X-Axis time from JS date

问题描述

我想用Highcharts从我的数据库中看到温度。
JS数据数组如下所示：

$ p $ $ $ $ $ $ $ $ $ $ $ code>

例如：

  [ Fri Mar 04 2016 01:39:10 GMT + 0100（中欧标准时间），20.5] 
  

正如你所看到的，我有一个日期对象和一个值。所以我的问题是格式化X轴，它显示我的日期，最好的情况下格式化为HH：MM。这看起来像我使用xAxis类型的日期时间，但这是行不通的。

  xAxis：{
 type ：'datetime'
 // ... 
} 
  

你知道吗这个问题的解决方案？

解决方案

Highcharts以时间戳的形式（以毫秒为单位）接收 datetime 。您正在提供一个Date对象。不要只是插入Date对象，而是使用Date对象的 getTime（）函数来获取时间戳。

例如（ JSFiddle ）：

  $（function（）{
 //当前时间的时间戳
 var timestampNow = new Date （）.getTime（）; 
 //从现在起一小时后的时间戳
 var timestampOneHour = new Date（timestampNow +（3600 * 1000））.getTime（）; 
 
 $（'＃container'）。highcharts（{
 xAxis：{
 type：'datetime'
}，
 series：[{
 data：[
 [timestampNow，1]，
 [timestampOneHour，2] 
] 
}] 
}）; 
}）; 
  

I want to visualize the temperature from my database with Highcharts. The JS data array looks like the following:

[date object, value]

For example:

[Fri Mar 04 2016 01:39:10 GMT+0100 (Central Europe Standard Time), 20.5]

As you can see, I have a date object and a value. So my problem is to format the x-axis that it shows my dates, in best case formatted to HH:MM. It seems like I have use the xAxis type datetime, but this doesn't work.

xAxis: {
    type: 'datetime'
    // ...
}

Do you know a solution for this problem?

解决方案

Highcharts takes in datetime in the form of timestamps in milliseconds. You are providing a Date object. Instead of just inserting the Date object use the getTime() function of the Date object to get the timestamp.

For example (JSFiddle):

$(function () {
    // The timestamp of the current time
    var timestampNow = new Date().getTime();
    // The timestamp one hour from now
    var timestampOneHour = new Date(timestampNow + (3600 * 1000)).getTime();

    $('#container').highcharts({
        xAxis: {
            type: 'datetime'
        },
        series: [{
            data: [
                [timestampNow, 1],
                [timestampOneHour, 2]
            ]
        }]
    });
});

这篇关于来自JS日期的Highcharts X-Axis时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！