2017-12-04 1 views
0

차트에서 나는 값 축 그래프에서 범주 및 기간 (hh : mm : ss)으로 사용자 목록을 보유하고 있습니다. 그리드 수를 24로 설정했지만 예상대로 작동하지 않습니다 (1 시간 * 24 단계). 2000 초 단위로 설정됩니다. 나는 많은 매개 변수를 변경하려고 시도했다.AM 차트 - 기간이 y 축에서 분할 됨

내 샘플 데이터 : 여기

https://live.amcharts.com/iMWNh/, 기간은 24 그리드의 1 시간 분할 업에서 예상대로 작동하지 않습니다 분할. 내 입력 데이터는 초 단위입니다.

어떤 조언이 필요합니까?

답변

0

이렇게하면 도움이되었습니다. 누군가가 유용하다고 생각하기를 바랍니다.

안녕,

불행하게도, 당신은 인해 제한의 일부 라이브 편집기를 사용하여 구현하는 것이 불가능하다 무엇을 필요로.

그러나 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

관련 문제