在amChart上授予图表不会给出预期的输出图表

时间：2018-06-08 10:31:12

标签： javascript amcharts gantt-chart

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

<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）。

请帮我找到问题。

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题