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/

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

1 个答案: