我正在使用 Amcharts，该图表正在处理以下数据集，以便将它们呈现在条形图中。我能够呈现图表，但 BARS 正在向下弹出(从上到下)，根据值轴(一天中的时间)，它应该理想地弹出。
数据格式:
var chartData = [
{ "batchName":"dgfhdfgf",
"expectedEndTime": "23/10/18 23:30",
"actualEndTime": "23/10/18 23:37",
},
{
"batchName":"gdfgs",
"expectedEndTime": "24/10/18 00:05",
"actualEndTime": "24/10/18 00:05",
},
------------------
------------------
配置是:
AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"zoomOutText": '',
"columnSpacing": 0,
"dataDateFormat": "DD/MM/YY KK:NN",
"legend": {
"horizontalGap": 30,
"maxColumns": 30,
"useGraphSettings": true,
"markerSize": 10,
"padding": 10,
"valueText": ""
},
"dataProvider": chartData,
"valueAxes": [{
"id": "v1",
"position": "left",
"unitPosition": "left",
"axisColor": "#472F52",
"title": "Time of the Day",
"type": "date",
"axisThickness": 2,
"markPeriodChange": false,
"autoGridCount": false,
"minimumDate": "23/10/18 21:00",
"maximumDate": "24/10/18 23:59",
"gridCount": 20,
"dateFormat": "DD/MM/YY KK:NN",
// "minPeriod": "ss",
}
],
"startDuration": 1,
"graphs": [{
"id": "g1",
"valueAxis": "v1",
"fixedColumnWidth": 15,
"type": "column",
"fillAlphas": 0.9,
"lineThickness": 1.5,
"lineColor": "#0D338C",
"bulletBorderColor": "#0D338C",
"valueField": "expectedEndTime",
"title": "Expected Path",
"dateFormat": "DD/MM/YY KK:NN A",
"labelText": "[[labelExpected]]",
"labelColorField": "labelColor2",
"balloonText": "Expected EndTime : <b>[[value]]</b>"
},
{
"id": "g2",
"valueAxis": "v1",
"fillAlphas": 0.9,
"fixedColumnWidth": 15,
"type": "column",
"lineThickness": 1.5,
"lineColor": "#C63F05",
"bulletBorderColor": "#C63F05",
"valueField": "actualEndTime",
"title": "Actual Path",
"dateFormat": "DD/MM/YY KK:NN A",
"labelColor": "blue",
"labelText": "[[labelActual]]",
"labelColorField": "labelColor1",
"balloonText": "Actual EndTime : <b>[[value]]</b>"
}
],
"chartCursor": {
"categoryBalloonDateFormat": "DD",
"cursorAlpha": 0.1,
"cursorColor": "#000000",
"fullWidth": true,
"valueBalloonsEnabled": true,
"zoomable": false
},
"categoryField": "batchName",
"categoryAxis": {
"gridPosition": "start",
"axisThickness": 2,
"axisColor": "#472F52",
"autoGridCount": false,
"gridCount": 1000,
"title": "MRNG Batch Stages",
"labelRotation": 30
},
"export": {
"enabled": true,
"borderRadius": "10px",
"text-align": "center",
"pdfMake": {
"content": ["'<Name of the Metric to be displayed dynamically>'",
" ", "from <startDate> To <endDate>", {
"image": "reference", //exported image
"fit": [523.28, 769.89]
}
]
},
"legend": {
"position": "bottom", // or "right", "bottom" and "left" are possible
"width": 200, // optional
"height": 200 // optional
}
}
});
这是我的 JSFiddle
不确定，因为条形图的方向错误，所以出了什么问题。任何建议将不胜感激!
最佳答案
根据 date formatting documentation ，v3 的 dataDateFormat 不支持两位数的年份(请注意带星号的格式不起作用)。您必须在数据中使用四位数年份并相应地调整您的 dataDateFormat。
更新了下面的演示(注意您需要 JJ 00-23 小时，而不是 KK):
var chartData = [{
"batchName": "dgfhdfgf",
"expectedEndTime": "23/10/2018 23:30",
"actualEndTime": "23/10/2018 23:37",
},
{
"batchName": "gdfgs",
"expectedEndTime": "24/10/2018 00:05",
"actualEndTime": "24/10/2018 00:05",
},
{
"batchName": "ytryedfbg(GS)",
"expectedEndTime": "24/10/2018 00:48",
"actualEndTime": "24/10/2018 00:54"
},
{
"batchName": "jghjty",
"expectedEndTime": "24/10/2018 00:54",
"actualEndTime": "24/10/2018 01:20"
},
{
"batchName": "hgjghj (all)",
"expectedEndTime": "24/10/2018 01:01",
"actualEndTime": "24/10/2018 01:02"
},
{
"batchName": "mghjghj",
"expectedEndTime": "24/10/2018 01:35",
"actualEndTime": "24/10/2018 01:27"
},
{
"batchName": "dfd",
"expectedEndTime": "24/10/2018 03:15",
"actualEndTime": "24/10/2018 04:58",
"labelExpected": "03:15",
"labelActual": "04:58",
"labelColor1": "red",
"labelColor2": "blue"
},
{
"batchName": "rts",
"expectedEndTime": "24/10/2018 05:00",
"actualEndTime": "24/10/2018 04:55"
},
{
"batchName": "asdasd",
"expectedEndTime": "24/10/2018 05:18",
"actualEndTime": "24/10/2018 05:39"
},
{
"batchName": "dfasdf",
"expectedEndTime": "24/10/2018 05:30",
"actualEndTime": "24/10/2018 05:25"
}, {
"batchName": "dfggf",
"expectedEndTime": "24/10/2018 05:41",
"actualEndTime": "24/10/2018 05:49"
},
{
"batchName": "dfgd",
"expectedEndTime": "24/10/2018 06:00",
"actualEndTime": "24/10/2018 05:57"
},
{
"batchName": "fgsdfg",
"expectedEndTime": "24/10/2018 06:18",
"actualEndTime": "24/10/2018 04:46",
"labelExpected": "06:18",
"labelActual": "04:46",
"labelColor1": "red",
"labelColor2": "blue"
},
{
"batchName": "ghdf",
"expectedEndTime": "24/10/2018 06:31",
"actualEndTime": "24/10/2018 06:31"
},
{
"batchName": "ioklj",
"expectedEndTime": "24/10/2018 07:18",
"actualEndTime": "24/10/2018 08:58",
"labelExpected": "07:18",
"labelActual": "08:58",
"labelColor1": "red",
"labelColor2": "blue"
},
{
"batchName": "klhjoi",
"expectedEndTime": "24/10/2018 07:38",
"actualEndTime": "24/10/2018 05:57"
},
{
"batchName": "jdfhfgth",
"expectedEndTime": "24/10/2018 08:00",
"actualEndTime": "24/10/2018 09:03",
"labelExpected": "08:00",
"labelActual": "09:03",
"labelColor1": "red",
"labelColor2": "blue"
},
{
"batchName": "gdfhfhg",
"expectedEndTime": "24/10/2018 10:30",
"actualEndTime": "24/10/2018 10:56"
},
{
"batchName": "fdgsgdf",
"expectedEndTime": "24/10/2018 11:30",
"actualEndTime": "24/10/2018 12:37"
},
{
"batchName": "dgfasdf",
"expectedEndTime": "24/10/2018 11:30",
"actualEndTime": "24/10/2018 17:18"
},
{
"batchName": "tawetrgtsdf",
"expectedEndTime": "24/10/2018 11:30",
"actualEndTime": "24/10/2018 16:30",
"labelExpected": "11:30",
"labelActual": "16:30",
"labelColor1": "red",
"labelColor2": "blue"
},
{
"batchName": "efrwearf",
"expectedEndTime": "24/10/2018 11:30",
"actualEndTime": "24/10/2018 17:38",
"labelExpected": "11:30",
"labelActual": "17:38",
"labelColor1": "red",
"labelColor2": "blue"
},
{
"batchName": "fdsfsdg",
"expectedEndTime": "24/10/2018 16:00",
"actualEndTime": ""
}
];
AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"zoomOutText": '',
"columnSpacing": 0,
"dataDateFormat": "DD/MM/YYYY JJ:NN",
"legend": {
"horizontalGap": 30,
"maxColumns": 30,
"useGraphSettings": true,
"markerSize": 10,
"padding": 10,
"valueText": ""
},
"dataProvider": chartData,
"valueAxes": [{
"id": "v1",
"position": "left",
"unitPosition": "left",
"axisColor": "#472F52",
"title": "Time of the Day",
"type": "date",
"axisThickness": 2,
"markPeriodChange": false,
"autoGridCount": false,
"minimumDate": "23/10/2018 21:00",
"maximumDate": "24/10/2018 23:59",
"gridCount": 20,
//"dateFormat": "DD/MM/YYYY KK:NN",
// "minPeriod": "ss",
}
],
"startDuration": 1,
"graphs": [{
"id": "g1",
"valueAxis": "v1",
"fixedColumnWidth": 15,
"type": "column",
"fillAlphas": 0.9,
"lineThickness": 1.5,
"lineColor": "#0D338C",
"bulletBorderColor": "#0D338C",
"valueField": "expectedEndTime",
"title": "Expected Path",
"dateFormat": "DD/MM/YY KK:NN A",
"labelText": "[[labelExpected]]",
"labelColorField": "labelColor2",
"balloonText": "Expected EndTime : <b>[[value]]</b>"
},
{
"id": "g2",
"valueAxis": "v1",
"fillAlphas": 0.9,
"fixedColumnWidth": 15,
"type": "column",
"lineThickness": 1.5,
"lineColor": "#C63F05",
"bulletBorderColor": "#C63F05",
"valueField": "actualEndTime",
"title": "Actual Path",
"dateFormat": "DD/MM/YY KK:NN A",
"labelColor": "blue",
"labelText": "[[labelActual]]",
"labelColorField": "labelColor1",
"balloonText": "Actual EndTime : <b>[[value]]</b>"
}
],
"chartCursor": {
"categoryBalloonDateFormat": "DD",
"cursorAlpha": 0.1,
"cursorColor": "#000000",
"fullWidth": true,
"valueBalloonsEnabled": true,
"zoomable": false
},
"categoryField": "batchName",
"categoryAxis": {
"gridPosition": "start",
"axisThickness": 2,
"axisColor": "#472F52",
"autoGridCount": false,
"gridCount": 1000,
"title": "MRNG Batch Stages",
"labelRotation": 30
},
"export": {
"enabled": true,
"borderRadius": "10px",
"text-align": "center",
"pdfMake": {
"content": ["'<Name of the Metric to be displayed dynamically>'",
" ", "from <startDate> To <endDate>", {
"image": "reference", //exported image
"fit": [523.28, 769.89]
}
]
},
"legend": {
"position": "bottom", // or "right", "bottom" and "left" are possible
"width": 200, // optional
"height": 200 // optional
}
}
});#chartdiv {
width: 100%;
height: 500px;
}<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/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/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>关于javascript - amcharts 条形图呈相反方向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53011300/