2016-09-02 7 views
1

В настоящее время я борюсь с диаграммой Highcharts с часовым форматом. У меня есть серия с 65 точками данных, но часовой формат каждой точки составляет 24 часа. Я не могу использовать тот же формат в highchart, и он автоматически преобразуется, например, с 13:00:00 до 01:00:00.Проблема Преобразование Highcharts в формат 24 часа

Вот мой сценарий

<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> 
+0

вы должны рассмотреть возможность использования вашего timezoneOffset, может быть, это вызывает проблему? Посмотрите на этот пример: http://jsfiddle.net/sbznxyrb/2/ –

ответ

1

Highcharts не преобразование 13:00:00 в 01:00:00 , Вы используете стандартное 24-часовое время с высоким форматом Highcharts/Highstock. У вас просто нет точки данных с такой датой, которая будет отображаться со временем после 12 часов, из-за ваших timezoneOffset и других настроек диаграммы.

Пример с дополнительной точкой данных: http://jsfiddle.net/68xay5jb/

0

за 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... 
     ] 
    }] 
}); 
Смежные вопросы