AmCharts Диаграмма Ганта со временем данные не загружаются правильно

Question

Я пытаюсь построить из диаграммы Ганта с даты/времени на оси X, код у меня есть что-то вроде этого:

AmCharts.useUTC = true; 
    var chart = AmCharts.makeChart("user-pages", { 
     "type": "gantt", 
     "theme": "light", 
     "marginRight": 70, 
     "dataDateFormat": "DD-MM-YYYY HH:NN", 
     "columnWidth": 0.5, 
     "valueAxis": { 
     "type": "date" 
     }, 
     "brightnessStep": 7, 
     "graph": { 
     "fillAlphas": 1, 
     "lineAlpha": 1, 
     "lineColor": "#fff", 
     "balloonText": "<b>[[task]]</b>:<br />[[open]] -- [[value]]" 
     }, 
     "rotate": true, 
     "categoryField": "category", 
     "segmentsField": "segments", 
     "colorField": "color", 
     "startDateField": "start", 
     "endDateField": "end", 
     "dataProvider": [ { 
     "category": "Module #1", 
     "segments": [ { 
      "start": AmCharts.stringToDate("2016-10-03T09:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-04T10:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "color": "#b9783f", 
      "task": "Gathering requirements" 
     }] 
     }, { 
     "category": "Module #2", 
     "segments": [ { 
      "start": AmCharts.stringToDate("2016-10-03T07:00:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-03T08:00:00+00:00", "DD-MM-YYYY HH:NN"), 
      "color": "#b9783f", 
      "task": "Gathering requirements" 
     }, { 
      "start": AmCharts.stringToDate("2016-10-03T13:00:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-03T14:00:00+00:00", "DD-MM-YYYY HH:NN"), 
      "task": "Producing specifications" 
     }, { 
      "start": AmCharts.stringToDate("2016-10-03T15:00:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-03T16:00:00+00:00", "DD-MM-YYYY HH:NN"), 
      "task": "Development" 
     } ] 
     }, { 
     "category": "Module #3", 
     "segments": [ { 
      "start": AmCharts.stringToDate("2016-10-03T09:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-03T10:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "color": "#b9783f", 
      "task": "Gathering requirements" 
     }, { 
      "start": AmCharts.stringToDate("2016-10-03T11:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-03T12:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "task": "Producing specifications" 
     }, { 
      "start": AmCharts.stringToDate("2016-10-03T15:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-03T17:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "task": "Development" 
     } ] 
     }, { 
     "category": "Module #4", 
     "segments": [ { 
      "start": AmCharts.stringToDate("2016-10-03T07:00:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-03T08:00:00+00:00", "DD-MM-YYYY HH:NN"), 
      "color": "#b9783f", 
      "task": "Gathering requirements" 
     }, { 
      "start": AmCharts.stringToDate("2016-10-03T13:00:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-03T14:00:00+00:00", "DD-MM-YYYY HH:NN"), 
      "task": "Producing specifications" 
     }, { 
      "start": AmCharts.stringToDate("2016-10-03T15:00:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-03T16:00:00+00:00", "DD-MM-YYYY HH:NN"), 
      "task": "Development" 
     } ] 
     }, { 
     "category": "Module #5", 
     "segments": [ { 
      "start": AmCharts.stringToDate("2016-10-03T09:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-03T10:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "color": "#b9783f", 
      "task": "Gathering requirements" 
     }, { 
      "start": AmCharts.stringToDate("2016-10-03T11:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-03T12:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "task": "Producing specifications" 
     }, { 
      "start": AmCharts.stringToDate("2016-10-03T15:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-03T17:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "task": "Development" 
     } ] 
     } ], 
     "valueScrollbar": { 
     "autoGridCount": true 
     }, 
     "chartCursor": { 
     "cursorColor": "#55bb76", 
     "valueBalloonsEnabled": false, 
     "cursorAlpha": 0, 
     "valueLineAlpha": 0.5, 
     "valueLineBalloonEnabled": true, 
     "valueLineEnabled": true, 
     "zoomable": false, 
     "valueZoomable": true 
     }, 
     "export": { 
     "enabled": true 
     } 
    }); 

Вы можете увидеть вопрос здесь: http://jsfiddle.net/28305m8g/1/

Если изменить сегмент первого быть в тот же день:

[ { 
     "category": "Module #1", 
     "segments": [ { 
      "start": AmCharts.stringToDate("2016-10-03T09:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-04T10:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "color": "#b9783f", 
      "task": "Gathering requirements" 
     }] 

To:

[ { 
     "category": "Module #1", 
     "segments": [ { 
      "start": AmCharts.stringToDate("2016-10-03T09:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "end": AmCharts.stringToDate("2016-10-03T10:33:00+00:00", "DD-MM-YYYY HH:NN"), 
      "color": "#b9783f", 
      "task": "Gathering requirements" 
     }] 

Вы можете видеть, что это работает ниже: http://jsfiddle.net/28305m8g/2/

Кто-нибудь знает, почему это происходит, и может помочь мне исправить это?

Answer 1

Вы неправильно звоните AmCharts.stringToDate. Второй параметр - это формат даты строки, которую функция пытается проанализировать в первом параметре. Ваши даты указаны в формате ГГГГ-ММ-ДД, а не в формате DD-MM-YYYY. После исправления формата диаграмма будет отображаться правильно. Пример: AmCharts.stringToDate("2016-10-03T09:33:00+00:00", "YYYY-MM-DD HH:NN")

Вот ваша обновленная скрипка: http://jsfiddle.net/28305m8g/3/