Javascript amcharts Yaxis 最小值应设置为“00:00”
Javascript amcharts Yaxis minimum values should be set as "00:00"
我试图在 AmCharts 中将时间轴 (Yaxis/ValueAxis) 设置为最小值“00:00”。
代码如下：
var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"color": "black",
"dataDateFormat": "HH:NN:SS",
"dataProvider": [{
"businessDate": "01/08/18",
"duration": 531,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "02/08/18",
"duration": 552,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "03/08/18",
"duration": 506,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "06/08/18",
"duration": 657,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "07/08/18",
"duration": 578,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "08/08/18",
"duration": 694,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
},
{
"businessDate": "09/08/18",
"duration": 512,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "10/08/18",
"duration": 672,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "13/08/18",
"duration": 483,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "14/08/18",
"duration": 663,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "15/08/18",
"duration": 506,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "16/08/18",
"duration": 531,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "17/08/18",
"duration": 552,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "20/08/18",
"duration": 637,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
},
{
"businessDate": "21/08/18",
"duration": 624,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "22/08/18",
"duration": 506,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "23/08/18",
"duration": 666,
"reportPrintTime": "06:55:00",
"sla": "06:30:00",
}, {
"businessDate": "24/08/18",
"duration": 552,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "27/08/18",
"duration": 531,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "28/08/18",
"duration": 563,
"reportPrintTime": "05:12:00",
"sla": "06:30:00",
}
],
"valueAxes": [{
"id": "v1",
"position": "left",
"title": "Time of the Day",
"type": "date",
"period": "a",
"minimum":"00:00",
"minPeriod": "ss",
}, {
"id": "v2",
"unitPosition": "left",
"position": "right",
"title": "Duration of the Execution",
"duration": "mm",
"durationUnits": {
"hh": "h ",
"mm": "min"
}
}
],
"startDuration": 1,
"graphs": [{
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "duration",
"valueAxis": "v2",
"fillColor": "#e8e8e3",
"balloonText": "Duration : [[value]]",
"balloon": {
"adjustBorderColor": true,
"color": "black",
"cornerRadius": 5,
"fillColor": "#FFFFFF"
}
}, {
"lineAlpha": 0.9,
"type": "line",
"lineThickness": 1.5,
"bullet": "round",
"lineColor": "blue",
"bulletBorderColor": "blue",
"bulletBorderThickness": 0.2,
"bulletBorderAlpha": 0.5,
"valueField": "reportPrintTime",
"dateFormat": "HH:NN:SS",
"valueAxis": "v1",
"balloonText": "Report Print Time : <b>[[value]]</b>"
},
{
"lineAlpha": 0.9,
"type": "line",
"lineThickness": 1.5,
"lineColor": "red",
"bullet": "square",
"bulletBorderColor": "red",
"bulletBorderThickness": 0.2,
"bulletBorderAlpha": 0.5,
"valueField": "sla",
"dateFormat": "HH:NN:SS",
"valueAxis": "v1",
"balloonText": "SLA : <b>[[value]]</b>"
}
],
"chartCursor": {
"categoryBalloonDateFormat": "DD",
"cursorAlpha": 0.1,
"cursorColor": "#000000",
"fullWidth": true,
"valueBalloonsEnabled": true,
"zoomable": false
},
"categoryField": "businessDate",
"categoryAxis": {
"gridPosition": "start",
"autoGridCount": false,
"gridCount": 1000,
"title": "Business Dates (in 'dd/mm/yy' format)",
"labelRotation": 75
}
});
#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/themes/light.js"></script>
<div id="chartdiv"></div>
要求是：
(a) 蓝线（报告打印时间）与水平轴混淆了
(b) 红线 (SLA) 也绘制在图表的顶部，应该有一些边距 - 并且图表应该恰好绘制在中心。
我正在尝试将值轴的 'minimum' 属性 设置为 "00:00" ，但它不起作用。任何建议将不胜感激！
如果要强制显示“00:00”，则需要将 minimumDate since you're using a date-based value axis. Maximum date is set through maximumDate, which you'll want to use if you want to adjust the position of the red line to fall more in the center. You'll also want to set markPeriodChange 设置为 false，因为假设仅时间日期设置为 1 月 1 日。
更新了以下代码：
var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"color": "black",
"dataDateFormat": "HH:NN:SS",
"dataProvider": [{
"businessDate": "01/08/18",
"duration": 531,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "02/08/18",
"duration": 552,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "03/08/18",
"duration": 506,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "06/08/18",
"duration": 657,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "07/08/18",
"duration": 578,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "08/08/18",
"duration": 694,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
},
{
"businessDate": "09/08/18",
"duration": 512,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "10/08/18",
"duration": 672,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "13/08/18",
"duration": 483,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "14/08/18",
"duration": 663,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "15/08/18",
"duration": 506,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "16/08/18",
"duration": 531,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "17/08/18",
"duration": 552,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "20/08/18",
"duration": 637,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
},
{
"businessDate": "21/08/18",
"duration": 624,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "22/08/18",
"duration": 506,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "23/08/18",
"duration": 666,
"reportPrintTime": "06:55:00",
"sla": "06:30:00",
}, {
"businessDate": "24/08/18",
"duration": 552,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "27/08/18",
"duration": 531,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "28/08/18",
"duration": 563,
"reportPrintTime": "05:12:00",
"sla": "06:30:00",
}
],
"valueAxes": [{
"id": "v1",
"position": "left",
"title": "Time of the Day",
"type": "date",
//"period": "a", //not valid
"minimumDate": "00:00",
"maximumDate": "12:30", //set/adjust if needed.
"markPeriodChange": false,
"minPeriod": "ss",
}, {
"id": "v2",
"unitPosition": "left",
"position": "right",
"title": "Duration of the Execution",
"duration": "mm",
"durationUnits": {
"hh": "h ",
"mm": "min"
}
}
],
"startDuration": 1,
"graphs": [{
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "duration",
"valueAxis": "v2",
"fillColor": "#e8e8e3",
"balloonText": "Duration : [[value]]",
"balloon": {
"adjustBorderColor": true,
"color": "black",
"cornerRadius": 5,
"fillColor": "#FFFFFF"
}
}, {
"lineAlpha": 0.9,
"type": "line",
"lineThickness": 1.5,
"bullet": "round",
"lineColor": "blue",
"bulletBorderColor": "blue",
"bulletBorderThickness": 0.2,
"bulletBorderAlpha": 0.5,
"valueField": "reportPrintTime",
"dateFormat": "HH:NN:SS",
"valueAxis": "v1",
"balloonText": "Report Print Time : <b>[[value]]</b>"
},
{
"lineAlpha": 0.9,
"type": "line",
"lineThickness": 1.5,
"lineColor": "red",
"bullet": "square",
"bulletBorderColor": "red",
"bulletBorderThickness": 0.2,
"bulletBorderAlpha": 0.5,
"valueField": "sla",
"dateFormat": "HH:NN:SS",
"valueAxis": "v1",
"balloonText": "SLA : <b>[[value]]</b>"
}
],
"chartCursor": {
"categoryBalloonDateFormat": "DD",
"cursorAlpha": 0.1,
"cursorColor": "#000000",
"fullWidth": true,
"valueBalloonsEnabled": true,
"zoomable": false
},
"categoryField": "businessDate",
"categoryAxis": {
"gridPosition": "start",
"autoGridCount": false,
"gridCount": 1000,
"title": "Business Dates (in 'dd/mm/yy' format)",
"labelRotation": 75
}
});
#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/themes/light.js"></script>
<div id="chartdiv"></div>
我试图在 AmCharts 中将时间轴 (Yaxis/ValueAxis) 设置为最小值“00:00”。
代码如下：
var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"color": "black",
"dataDateFormat": "HH:NN:SS",
"dataProvider": [{
"businessDate": "01/08/18",
"duration": 531,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "02/08/18",
"duration": 552,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "03/08/18",
"duration": 506,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "06/08/18",
"duration": 657,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "07/08/18",
"duration": 578,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "08/08/18",
"duration": 694,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
},
{
"businessDate": "09/08/18",
"duration": 512,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "10/08/18",
"duration": 672,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "13/08/18",
"duration": 483,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "14/08/18",
"duration": 663,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "15/08/18",
"duration": 506,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "16/08/18",
"duration": 531,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "17/08/18",
"duration": 552,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "20/08/18",
"duration": 637,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
},
{
"businessDate": "21/08/18",
"duration": 624,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "22/08/18",
"duration": 506,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "23/08/18",
"duration": 666,
"reportPrintTime": "06:55:00",
"sla": "06:30:00",
}, {
"businessDate": "24/08/18",
"duration": 552,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "27/08/18",
"duration": 531,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "28/08/18",
"duration": 563,
"reportPrintTime": "05:12:00",
"sla": "06:30:00",
}
],
"valueAxes": [{
"id": "v1",
"position": "left",
"title": "Time of the Day",
"type": "date",
"period": "a",
"minimum":"00:00",
"minPeriod": "ss",
}, {
"id": "v2",
"unitPosition": "left",
"position": "right",
"title": "Duration of the Execution",
"duration": "mm",
"durationUnits": {
"hh": "h ",
"mm": "min"
}
}
],
"startDuration": 1,
"graphs": [{
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "duration",
"valueAxis": "v2",
"fillColor": "#e8e8e3",
"balloonText": "Duration : [[value]]",
"balloon": {
"adjustBorderColor": true,
"color": "black",
"cornerRadius": 5,
"fillColor": "#FFFFFF"
}
}, {
"lineAlpha": 0.9,
"type": "line",
"lineThickness": 1.5,
"bullet": "round",
"lineColor": "blue",
"bulletBorderColor": "blue",
"bulletBorderThickness": 0.2,
"bulletBorderAlpha": 0.5,
"valueField": "reportPrintTime",
"dateFormat": "HH:NN:SS",
"valueAxis": "v1",
"balloonText": "Report Print Time : <b>[[value]]</b>"
},
{
"lineAlpha": 0.9,
"type": "line",
"lineThickness": 1.5,
"lineColor": "red",
"bullet": "square",
"bulletBorderColor": "red",
"bulletBorderThickness": 0.2,
"bulletBorderAlpha": 0.5,
"valueField": "sla",
"dateFormat": "HH:NN:SS",
"valueAxis": "v1",
"balloonText": "SLA : <b>[[value]]</b>"
}
],
"chartCursor": {
"categoryBalloonDateFormat": "DD",
"cursorAlpha": 0.1,
"cursorColor": "#000000",
"fullWidth": true,
"valueBalloonsEnabled": true,
"zoomable": false
},
"categoryField": "businessDate",
"categoryAxis": {
"gridPosition": "start",
"autoGridCount": false,
"gridCount": 1000,
"title": "Business Dates (in 'dd/mm/yy' format)",
"labelRotation": 75
}
});
#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/themes/light.js"></script>
<div id="chartdiv"></div>
要求是：
(a) 蓝线（报告打印时间）与水平轴混淆了
(b) 红线 (SLA) 也绘制在图表的顶部，应该有一些边距 - 并且图表应该恰好绘制在中心。
我正在尝试将值轴的 'minimum' 属性 设置为 "00:00" ，但它不起作用。任何建议将不胜感激！
如果要强制显示“00:00”，则需要将 minimumDate since you're using a date-based value axis. Maximum date is set through maximumDate, which you'll want to use if you want to adjust the position of the red line to fall more in the center. You'll also want to set markPeriodChange 设置为 false，因为假设仅时间日期设置为 1 月 1 日。
更新了以下代码：
var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"color": "black",
"dataDateFormat": "HH:NN:SS",
"dataProvider": [{
"businessDate": "01/08/18",
"duration": 531,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "02/08/18",
"duration": 552,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "03/08/18",
"duration": 506,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "06/08/18",
"duration": 657,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "07/08/18",
"duration": 578,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "08/08/18",
"duration": 694,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
},
{
"businessDate": "09/08/18",
"duration": 512,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "10/08/18",
"duration": 672,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "13/08/18",
"duration": 483,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "14/08/18",
"duration": 663,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "15/08/18",
"duration": 506,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "16/08/18",
"duration": 531,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "17/08/18",
"duration": 552,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "20/08/18",
"duration": 637,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
},
{
"businessDate": "21/08/18",
"duration": 624,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "22/08/18",
"duration": 506,
"reportPrintTime": "04:15:00",
"sla": "06:30:00",
}, {
"businessDate": "23/08/18",
"duration": 666,
"reportPrintTime": "06:55:00",
"sla": "06:30:00",
}, {
"businessDate": "24/08/18",
"duration": 552,
"reportPrintTime": "05:01:00",
"sla": "06:30:00",
}, {
"businessDate": "27/08/18",
"duration": 531,
"reportPrintTime": "04:40:00",
"sla": "06:30:00",
}, {
"businessDate": "28/08/18",
"duration": 563,
"reportPrintTime": "05:12:00",
"sla": "06:30:00",
}
],
"valueAxes": [{
"id": "v1",
"position": "left",
"title": "Time of the Day",
"type": "date",
//"period": "a", //not valid
"minimumDate": "00:00",
"maximumDate": "12:30", //set/adjust if needed.
"markPeriodChange": false,
"minPeriod": "ss",
}, {
"id": "v2",
"unitPosition": "left",
"position": "right",
"title": "Duration of the Execution",
"duration": "mm",
"durationUnits": {
"hh": "h ",
"mm": "min"
}
}
],
"startDuration": 1,
"graphs": [{
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "duration",
"valueAxis": "v2",
"fillColor": "#e8e8e3",
"balloonText": "Duration : [[value]]",
"balloon": {
"adjustBorderColor": true,
"color": "black",
"cornerRadius": 5,
"fillColor": "#FFFFFF"
}
}, {
"lineAlpha": 0.9,
"type": "line",
"lineThickness": 1.5,
"bullet": "round",
"lineColor": "blue",
"bulletBorderColor": "blue",
"bulletBorderThickness": 0.2,
"bulletBorderAlpha": 0.5,
"valueField": "reportPrintTime",
"dateFormat": "HH:NN:SS",
"valueAxis": "v1",
"balloonText": "Report Print Time : <b>[[value]]</b>"
},
{
"lineAlpha": 0.9,
"type": "line",
"lineThickness": 1.5,
"lineColor": "red",
"bullet": "square",
"bulletBorderColor": "red",
"bulletBorderThickness": 0.2,
"bulletBorderAlpha": 0.5,
"valueField": "sla",
"dateFormat": "HH:NN:SS",
"valueAxis": "v1",
"balloonText": "SLA : <b>[[value]]</b>"
}
],
"chartCursor": {
"categoryBalloonDateFormat": "DD",
"cursorAlpha": 0.1,
"cursorColor": "#000000",
"fullWidth": true,
"valueBalloonsEnabled": true,
"zoomable": false
},
"categoryField": "businessDate",
"categoryAxis": {
"gridPosition": "start",
"autoGridCount": false,
"gridCount": 1000,
"title": "Business Dates (in 'dd/mm/yy' format)",
"labelRotation": 75
}
});
#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/themes/light.js"></script>
<div id="chartdiv"></div>