javascript - Javascript amcharts Yaxis最小值应设置为“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" ，但它不起作用。任何建议将不胜感激！
解决方案
您需要使用minimumDate，因为您使用的是基于日期的值轴。最大日期通过 设置maximumDate，如果您想调整红线的位置以使其更多地落在中心，您将需要使用它。如果您想强制“00:00”可见，您还需要设置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>推荐阅读
- domain-driven-design - Lightbend 反应式架构认证
- google-sheets - 使用 2 个电子表格的条件格式和 Importrange
- javascript - React native ScrollView 重置 setState 上的位置
- asp.net - IIS 服务于旧版本的文件
- python - Python打印WebView的内容（Gtk3.0）
- javascript - 在 Chrome 扩展中使用语义 UI 反应？
- java - 底部应用栏问题
- css - 使用 flexbox 使相邻图像居中
- python - 从python中的列表中选择某些元素
- python - 在 anaconda 中安装 Geonamescache