javascript - 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")

这是您更新的 fiddle :http://jsfiddle.net/28305m8g/3/