График грантов на amChart не дает ожидаемого графика вывода

Question

Я новичок в amCharts.Я хочу создать Ganttchart на 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>

Но я не получил ожидаемую диаграмму Ганта и ее тонкую линию.Мои данные принадлежат одному дню.Поэтому можно пропустить часть даты (ГГГГ-ММ-ДД) из формата данных.

Пожалуйста, помогите мне найти проблему.

Answer 1

Ваш dataDateFormat неверен для часов и минут.Для разбора часов с 0 до 23 используйте JJ, а для разбора минут необходим идентификатор NN;у вас есть строчные буквы, которые недопустимы (примечание HH относится к часам с 1-24, которые ваши данные не используют).

Более подробную информацию о строках правильного формата можно найти в документации о датах форматирования .

Обновленная демонстрация ниже:

    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>