问题将Highcharts转换为24小时格式

Question

我目前正在用我的Highcharts图表和小时格式挣扎。我有一个包含65点数据的系列，但每个点的小时格式为24小时。我无法在高图中使用相同的格式，它会自动将例如13:00:00转换为01:00:00。

这里是我的脚本

<script> 
Highcharts.setOptions({ global: { timezoneOffset: 660, useUTC: true } }); 
var chart1; 
$(document).ready(function() { 
    chart1 = new Highcharts.StockChart({ 
     chart: { renderTo:'chart1_container', type: 'spline' }, 
     plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: true } }, 
     subtitle: { text: 'Y1' }, 
     title: { text: 'Y1' }, 
     tooltip: { enabled: true, formatter: function() {var s = [];$.each(this.points, function(i, point) {s.push('<span style="color:'+point.series.color+';font-weight:bold;">'+ point.series.name +' : '+point.y + '<span>'); });return s.join(' and ');}, shared: true }, 
     xAxis: { dateTimeLabelFormats: { hour: '%H:%M', day: '%H:%M' }, type: 'datetime' }, 
     yAxis: { title: { text: 'Y1' } }, 
     series: [{ data: [[Date.parse('09/01/2016 12:45:34'), 0], [Date.parse('09/01/2016 12:46:11'), 0], [Date.parse('09/01/2016 12:47:24'), 0], [Date.parse('09/01/2016 12:48:59'), 0], [Date.parse('09/01/2016 12:50:41'), 1], [Date.parse('09/01/2016 12:51:43'), 1], [Date.parse('09/01/2016 12:52:01'), 1], [Date.parse('09/01/2016 12:55:14'), 1], [Date.parse('09/01/2016 13:01:12'), 1], [Date.parse('09/01/2016 13:01:30'), 1], [Date.parse('09/01/2016 13:02:37'), 1], [Date.parse('09/01/2016 13:03:31'), 1], [Date.parse('09/01/2016 13:04:19'), 1], [Date.parse('09/01/2016 13:05:14'), 1], [Date.parse('09/01/2016 13:05:32'), 1], [Date.parse('09/01/2016 13:06:52'), 1], [Date.parse('09/01/2016 13:07:47'), 1], [Date.parse('09/01/2016 13:08:06'), 1], [Date.parse('09/01/2016 13:09:01'), 1], [Date.parse('09/01/2016 13:10:14'), 1], [Date.parse('09/01/2016 13:12:27'), 2], [Date.parse('09/01/2016 13:13:15'), 2], [Date.parse('09/01/2016 13:14:03'), 2], [Date.parse('09/01/2016 13:14:40'), 2], [Date.parse('09/01/2016 13:15:35'), 2], [Date.parse('09/01/2016 13:16:30'), 2], [Date.parse('09/01/2016 13:17:55'), 2], [Date.parse('09/01/2016 13:18:21'), 2], [Date.parse('09/01/2016 13:21:30'), 2], [Date.parse('09/01/2016 13:23:58'), 3], [Date.parse('09/01/2016 13:26:39'), 3], [Date.parse('09/01/2016 13:29:18'), 4], [Date.parse('09/01/2016 13:30:14'), 4], [Date.parse('09/01/2016 13:31:29'), 4], [Date.parse('09/01/2016 13:32:36'), 4], [Date.parse('09/01/2016 13:34:10'), 4], [Date.parse('09/01/2016 13:36:39'), 5], [Date.parse('09/01/2016 13:39:01'), 5], [Date.parse('09/01/2016 13:39:38'), 5], [Date.parse('09/01/2016 13:40:46'), 5], [Date.parse('09/01/2016 13:42:01'), 6], [Date.parse('09/01/2016 13:43:09'), 6], [Date.parse('09/01/2016 13:45:32'), 6], [Date.parse('09/01/2016 13:46:59'), 7], [Date.parse('09/01/2016 13:48:26'), 7], [Date.parse('09/01/2016 13:49:04'), 7], [Date.parse('09/01/2016 13:50:11'), 7], [Date.parse('09/01/2016 13:51:46'), 8], [Date.parse('09/01/2016 13:55:18'), 8], [Date.parse('09/01/2016 13:56:04'), 8], [Date.parse('09/01/2016 13:59:37'), 9], [Date.parse('09/01/2016 14:02:25'), 10], [Date.parse('09/01/2016 14:08:38'), 11], [Date.parse('09/01/2016 14:12:13'), 12], [Date.parse('09/01/2016 14:13:12'), 12], [Date.parse('09/01/2016 14:15:58'), 13], [Date.parse('09/01/2016 14:19:44'), 14], [Date.parse('09/01/2016 14:20:35'), 14], [Date.parse('09/01/2016 14:20:55'), 14], [Date.parse('09/01/2016 14:21:53'), 14], [Date.parse('09/01/2016 14:22:52'), 14], [Date.parse('09/01/2016 14:23:51'), 15], [Date.parse('09/01/2016 14:24:30'), 15]], name: 'Y1' }] 
    }); 
}); 
</script> 

Answer 1

Highcharts未进行转换13:00:00至01:00:00 。您正在使用默认的24小时日期时间Highcharts/Highstock格式。由于您的timezoneOffset和其他图表的设置，您只是没有具有此日期的数据点，因此会在晚上12点后显示。

例如使用额外的数据点：http://jsfiddle.net/68xay5jb/

Answer 2

为24小时甲尝试做像下面Date.UTC

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container' 
    }, 
    xAxis: { 
     type: 'datetime' //ensures that xAxis is treated as datetime values 
    }, 

    series: [{ 
     data: [ 
      [Date.UTC(2012, 5, 22, 8, 15), 14.8], 
      [Date.UTC(2012, 5, 22, 8, 20), 13.9], 
      [Date.UTC(2012, 5, 22, 8, 25), 12.8] 
      //and so on... 
     ] 
    }] 
});