数据时间未正确加载的 AmCharts 甘特图

Question

我正在尝试绘制 X 轴上带有 Date/Time 的甘特图，我的代码是这样的：

 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/

数据时间未正确加载的 AmCharts 甘特图

AmCharts Gantt Chart with Data time not loading correctly

javascript

jquery

charts

amcharts