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 。 第二個參數是函數在第一個參數中嘗試解析的字符串日期的格式。 您的日期采用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/