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" 
     }] 

要：

[ { 
     "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。第二個參數是函數試圖在第一個參數中解析的字符串date的格式。您的日期採用YYYY-MM-DD格式，而不是DD-MM-YYYY。修正格式後，圖表將正確呈現。例如：AmCharts.stringToDate("2016-10-03T09:33:00+00:00", "YYYY-MM-DD HH:NN")

這是你更新的提琴：http://jsfiddle.net/28305m8g/3/