이렇게하면 도움이되었습니다. 누군가가 유용하다고 생각하기를 바랍니다.
안녕,
불행하게도, 당신은 인해 제한의 일부 라이브 편집기를 사용하여 구현하는 것이 불가능하다 무엇을 필요로.
그러나 amChart를 사용하면 가능합니다. 여기
내가 만든 필요한 변경 :
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"categoryField": "category",
"rotate": true,
"startDuration": 1,
"backgroundAlpha": 0.8,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "Online(secs)",
"type": "column",
"valueField": "Online(sec)"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "Offline(secs)",
"type": "column",
"valueField": "Offline(sec)"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"maximum": 86400000,
"stackType": "regular",
"strictMinMax": true,
"autoGridCount": false,
"autoRotateCount": 0,
"gridCount": 24,
"labelRotation": 50.4,
"title": "",
"titleRotation": 0,
"type": "date",
"minPeriod": "hh",
"boldPeriodBeginning": false,
"markPeriodChange": false
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
],
"dataProvider": [
{
"category": "Diana",
"Online(sec)": 7200000,
"Offline(sec)": 79200000
},
{
"category": "Clarke",
"Online(sec)": 18000000,
"Offline(sec)": 68400000
},
{
"category": "Bruce",
"Online(sec)": 3600000,
"Offline(sec)": 7200000
}
]
});
https://codepen.io/team/amcharts/pen/55fe695a57e33657e9d5feb33423d481?editors=0010
이 꽤 몇 가지 변경했다 :
1) 값 축에서 시간을 제거하고 그 설정 유형 : "날짜;
2) 다음과 같이 값을 da로 만듭니다. 문자열이 아닌 문자열 (따옴표를 지우지 말 것)을 입력하고 을 밀리 초로 변환하십시오. 자바 스크립트는 밀리 초 단위이므로,
3) 마찬가지로 valueAxis의 최대 값도 밀리 초로 변환합니다.
4) valueAxis에 대해 다음 두 가지 설정을 설정합니다 (이 형식을 다르게 첫 번째 시간)
"boldPeriodBeginning"을 시도하지 않도록 : "markPeriodChange"거짓 : 거짓
5) 마지막으로 차트 코드 앞에 AmCharts.useUTC = false를 설정하십시오. ( 타임 스탬프가 로컬 시간대로 다시 계산되지 않음)
이 정보가 유용하게 활용되기를 바랍니다.
너의 감사
Martynas Majeris
amCharts