我是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/