将 Highcharts 转换为 24 小时格式

Question

我目前正在为使用小时格式的 Highcharts 图表苦苦挣扎。我有一个包含 65 个数据点的系列，但每个点的小时格式是 24 小时。我无法在 highchart 中使用相同的格式，它会自动将 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

对于 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...
        ]
    }]
});

Answer 2

Highcharts 没有将 13:00:00 转换为 01:00:00。您正在使用默认的 24 小时日期时间 Highcharts/Highstock 格式。由于您的 timezoneOffset 和其他图表的设置，您只是没有日期显示为中午 12 点之后的数据点。

带有额外数据点的示例：http://jsfiddle.net/68xay5jb/

将 Highcharts 转换为 24 小时格式

Issue Converting Highcharts to 24 hours format

highcharts

highstock