用highcharts api在当地时间的x轴上显示ticks

Question

我有一个带有日期/时间x轴的折线图。点有一个名称被转换为当地时间。但是，刻度线标记位于UTC午夜。我怎样才能让他们在当地午夜？

为了澄清，我的本地时间是EDT（-04：00）。因此，大约在20:00时，会显示刻度线。

var chart = Highcharts.chart('container', { 
    "chart": { 
    "type": "line", 
    "height": 300, 
    "marginLeft": 60, 
    "marginRight": 0, 
    "spacingLeft": 0, 
    "spacingRight": 0, 
    "style": { 
     "fontSize": 14 
    }, 
    "zoomType": "x" 
    }, 
    "tooltip": { 
    "pointFormat": "{point.y}", 
    "style": { 
     "fontSize": 14 
    } 
    }, 
    "exporting": { 
    "enabled": false 
    }, 
    "title": { 
    "text": "", 
    "style": { 
     "display": "none" 
    } 
    }, 
    "subtitle": { 
    "text": "", 
    "style": { 
     "display": "none" 
    } 
    }, 
    "legend": { 
    "enabled": "false" 
    }, 
    "xAxis": { 
    "type": "datetime", 
    "labels": { 
     "enabled": true, 
     "style": { 
     "fontSize": "12px" 
     } 
    }, 
    "title": { 
     "text": null 
    }, 
    "minTickInterval": 86400000 
    }, 
    "plotOptions": { 
    "line": { 
     "color": "#33aaee", 
     "step": "true", 
     "lineWidth": 1 
    } 
    }, 
    "credits": { 
    "enabled": false 
    }, 
    "series": [{ 
    "data": [{ 
     "x": 1499935040582, 
     "y": 600.8919674194846, 
     "name": "Jul 13, 2017 4:37 AM" 
    }, { 
     "x": 1500069665426, 
     "y": 600.3026594460489, 
     "name": "Jul 14, 2017 6:01 PM" 
    }, { 
     "x": 1500133689471, 
     "y": 600.7274040373635, 
     "name": "Jul 15, 2017 11:48 AM" 
    }, { 
     "x": 1500197550895, 
     "y": 600.1197607401385, 
     "name": "Jul 16, 2017 5:32 AM" 
    }, { 
     "x": 1500224766324, 
     "y": 600.2311428390589, 
     "name": "Jul 16, 2017 1:06 PM" 
    }, { 
     "x": 1500247544551, 
     "y": 600.5511455212492, 
     "name": "Jul 16, 2017 7:25 PM" 
    }, { 
     "x": 1500282216949, 
     "y": 600.2677789206001, 
     "name": "Jul 17, 2017 5:03 AM" 
    }, { 
     "x": 1500285249151, 
     "y": 600.3165520296044, 
     "name": "Jul 17, 2017 5:54 AM" 
    }, { 
     "x": 1500472917987, 
     "y": 600.6858600814295, 
     "name": "Jul 19, 2017 10:01 AM" 
    }, { 
     "x": 1500479945476, 
     "y": 600.6974345877289, 
     "name": "Jul 19, 2017 11:59 AM" 
    }], 
    "showInLegend": false, 
    "allowPointSelect": true 
    }] 
}); 

这是一个小提琴展示这件事。 Highcharts fiddle

Answer 1

。我使用moment.js格式化时间数据，所以我改变它：

chart.series[0].data.push({ x: moment(grp.Time).format('x'), 
    y: grp.DoubleValue, name: moment(grp.Time).format(this.config.get('momentFullDateTimeFormat')) }); 

到：

chart.series[0].data.push({ x: moment(grp.Time).utc(true).format('x'), 
    y: grp.DoubleValue, name: moment(grp.Time).format(this.config.get('momentFullDateTimeFormat')) }); 

所以基本上我加入了“.utc（真）”的时刻定义为x值。

Answer 2

将您的时代更改为javascript日期[new Date（epoch）]这将使日期/时间字段以本地时间而不是UTC显示。

"series": [{ 
    "data": [{ 
     "x": new Date(1499935040582), 
     "y": 600.8919674194846 
    }, { 
     "x": new Date(1500069665426), 
     "y": 600.3026594460489 
    }, { 
     "x": new Date(1500133689471), 
     "y": 600.7274040373635 
    }, { 
     "x": new Date(1500197550895), 
     "y": 600.1197607401385 
    }, { 
     "x": new Date(1500224766324), 
     "y": 600.2311428390589 
    }, { 
     "x": new Date(1500247544551), 
     "y": 600.5511455212492 
    }, { 
     "x": new Date(1500282216949), 
     "y": 600.2677789206001 
    }, { 
     "x": new Date(1500285249151), 
     "y": 600.3165520296044 
    }, { 
     "x": new Date(1500472917987), 
     "y": 600.6858600814295 
    }, { 
     "x": new Date(1500479945476), 
     "y": 600.6974345877289 
    }], 

这应该让你的图表中的规模与找到了答案，以我的问题，你的本地时区