javascript - amChart上的授权图未提供预期的输出图

我是amCharts的新手。我想在amCharts上创建甘特图，以可视化我的数据集。我的脚本如下。

<div id="chartdiv2" style="width: 100%; height: 500px;"></div>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/gantt.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>


<script>
    var chardiv2 =  AmCharts.makeChart( "chartdiv2", {
        "type": "gantt",
        "theme": "chart",
        "marginRight": 70,
        "period": "hh",
        "dataDateFormat": "YYYY-MM-DD hh:nn",
        "columnWidth": 0.5,
        "valueAxis": {
            "type": "date",
            "parseDates": true,
            "minPeriod": "mm"
        },
        "brightnessStep": 7,
        "graph": {
            "lineAlpha": 1,
            "lineColor": "#7d244a",
            "fillAlphas": 0.5,
            "balloonText": "<b> lspId :[[lspId]], orderId: [[orderId]]</b><br />[[start]] -- [[end]]",
            "labelText": "[[vehicleReg]]",
            "labelPosition": "middle",
            "behindColumns": "true"
        },
        "rotate": true,
        "categoryField": "category",
        "segmentsField": "segments",
        "colorField": "color",
        "startDate": "2018-10-02 00:00",
        "startDateField": "start",
        "endDateField": "end",
        //"dataProvider": dataProvider,
        "dataProvider": [{
            "category":"dock 1",
            "segments": [{
                "start": "2018-10-02 09:30",
                "end" : "2018-10-02 10:20",
                "color" : "#0000ff",
                "lspId" : 2,
                "vehicleReg" : "678A",
                "orderId" : 5
            },{
                "start": "2018-10-02 14:00",
                "end" : "2018-10-02 15:05",
                "color" : "#0000ff",
                "lspId" : 2,
                "vehicleReg" : "678A",
                "orderId" : 5
            }, { "start": "2018-10-02 17:00",
                "end" : "2018-10-02 18:00",
                "color" : "#0000ff",
                "lspId" : 2,
                "vehicleReg" : "678A",
                "orderId" : 5
            } ] }, {
            "category":"dock 2",
            "segments": [{
                "start": "2018-10-02 08:00",
                "end" : "2018-10-02 09:30",
                "color" : "#0000ff",
                "lspId" : 2,
                "vehicleReg" : "608A",
                "orderId" : 5
            },{
                "start": "2018-10-02 10:00",
                "end" : "2018-10-02 11:00",
                "color" : "#0000ff",
                "lspId" : 2,
                "vehicleReg" : "608A",
                "orderId" : 5
            }] }],
        "valueScrollbar": {
            "autoGridCount": true
        },
        "chartCursor": {
            "cursorColor": "#55bb76",
            "valueBalloonsEnabled": false,
            "cursorAlpha": 0,
            "valueLineAlpha": 0.5,
            "valueLineBalloonEnabled": true,
            "valueLineEnabled": true,
            "zoomable": false,
            "valueZoomable": true
        },
        "export": {
            "enabled": true
        }
    })
   </script>

但是我没有得到预期的甘特图，而是垂直线多么细。我的数据属于一天。因此可以从数据格式中跳过日期部分（YYYY-MM-DD）。

请帮助我找到问题。

最佳答案

您的dataDateFormat在数小时和数分钟内都不正确。要解析0-23的小时数，请使用JJ，而解析分钟数则需要NN标识符；您使用的小写字母无效（请注意，HH表示1-24个小时的小时，您的数据不会使用）。

您可以在formatting dates documentation中找到有关正确格式字符串的更多信息。

更新了下面的演示：

    var chardiv2 =  AmCharts.makeChart( "chartdiv2", {
        "type": "gantt",
        "theme": "chart",
        "marginRight": 70,
        "period": "hh",
        "dataDateFormat": "YYYY-MM-DD JJ:NN",
        "columnWidth": 0.5,
        "valueAxis": {
            "type": "date",
            "parseDates": true,
            "minPeriod": "mm"
        },
        "brightnessStep": 7,
        "graph": {
            "lineAlpha": 1,
            "lineColor": "#7d244a",
            "fillAlphas": 0.5,
            "balloonText": "<b> lspId :[[lspId]], orderId: [[orderId]]</b><br />[[start]] -- [[end]]",
            "labelText": "[[vehicleReg]]",
            "labelPosition": "middle",
            "behindColumns": "true"
        },
        "rotate": true,
        "categoryField": "category",
        "segmentsField": "segments",
        "colorField": "color",
        "startDate": "2018-10-02 00:00",
        "startDateField": "start",
        "endDateField": "end",
        //"dataProvider": dataProvider,
        "dataProvider": [{
            "category":"dock 1",
            "segments": [{
                "start": "2018-10-02 09:30",
                "end" : "2018-10-02 10:20",
                "color" : "#0000ff",
                "lspId" : 2,
                "vehicleReg" : "678A",
                "orderId" : 5
            },{
                "start": "2018-10-02 14:00",
                "end" : "2018-10-02 15:05",
                "color" : "#0000ff",
                "lspId" : 2,
                "vehicleReg" : "678A",
                "orderId" : 5
            }, { "start": "2018-10-02 17:00",
                "end" : "2018-10-02 18:00",
                "color" : "#0000ff",
                "lspId" : 2,
                "vehicleReg" : "678A",
                "orderId" : 5
            } ] }, {
            "category":"dock 2",
            "segments": [{
                "start": "2018-10-02 08:00",
                "end" : "2018-10-02 09:30",
                "color" : "#0000ff",
                "lspId" : 2,
                "vehicleReg" : "608A",
                "orderId" : 5
            },{
                "start": "2018-10-02 10:00",
                "end" : "2018-10-02 11:00",
                "color" : "#0000ff",
                "lspId" : 2,
                "vehicleReg" : "608A",
                "orderId" : 5
            }] }],
        "valueScrollbar": {
            "autoGridCount": true
        },
        "chartCursor": {
            "cursorColor": "#55bb76",
            "valueBalloonsEnabled": false,
            "cursorAlpha": 0,
            "valueLineAlpha": 0.5,
            "valueLineBalloonEnabled": true,
            "valueLineEnabled": true,
            "zoomable": false,
            "valueZoomable": true
        },
        "export": {
            "enabled": true
        }
    });

<div id="chartdiv2" style="width: 100%; height: 500px;"></div>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/gantt.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

关于javascript - amChart上的授权图未提供预期的输出图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50758659/