javascript - amChart 上的拨款图表未给出预期的输出图

Question

我是 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)。

请帮我找出问题所在。

Answer 1

您的 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>