ExtJS 기초강좌 34 - 자동차 RPM과 속도계 예제를 통한 계량 차트(Gauge Chart) 알아보기
이번장은 계량기차트(Gauge Chart)에 대하여 진행하도록 하겠습니다.
Gauge 그래프는 보통 특정영역내에서 수치를 표현하기 위하여 사용되는 그래프 종류입니다.
예를들면, 차량에 장착되어있는 RPM/속도 계기판이나 전압을 측정할때 사용하는 전압측정기등과 같은 화면을 Gauge라 부릅니다. ▼
첫번째 이미지인 속도 계기판과 유사한 화면을 ExtJS에서 제공하는 Gauge 컴포넌트를 이용하여 제작해보도록 하겠습니다.
우선 전체 코드를 작성하여 실행결과 확인 후, 부분코드로 설명을 진행하도록 하겠습니다. ▼
Ext.onReady(function(){
var store = Ext.create('Ext.data.Store',{
fields : ['rpm','speed'],
data: [{rpm : 0, speed : 0}]
});
Ext.create('Ext.Panel', {
title : '계기판',
renderTo : Ext.getBody(),
width: 800,
height : 250,
layout : 'hbox',
tbar : [{
xtype : 'button',
text : '시속:20Km',
handler : function(){
store.setData([{rpm : 1, speed : 20}]);
}
},{
xtype : 'button',
text : '시속:60Km',
handler : function(){
store.setData([{rpm : 4, speed : 60}]);
}
},{
xtype : 'button',
text : '시속:120Km',
handler : function(){
store.setData([{rpm : 2, speed : 120}]);
}
},{
xtype : 'button',
text : '시속:240Km',
handler : function(){
store.setData([{rpm : 8, speed : 240}]);
}
},{
xtype : 'button',
text : '브레이크',
handler : function(){
store.setData([{rpm : 0, speed : 0}]);
}
}],
items: [
{
xtype: 'polar',
height: 200,
width: 400,
store: store,
insetPadding: 50,
innerPadding: 20,
axes: {
title: 'RPM',
type: 'numeric',
position: 'gauge',
minimum : 0,
maximum: 8,
majorTickSteps: 8,
},
series: {
type: 'gauge',
field: 'rpm',
needle: true,
donut: 30
}
},
{
xtype: 'polar',
height: 200,
width: 400,
store: store,
insetPadding: 50,
innerPadding: 20,
axes: {
title: 'Speed',
type: 'numeric',
position: 'gauge',
minimum : 0,
maximum: 260,
majorTickSteps : 13
},
series: {
type: 'gauge',
field: 'speed',
needle: true,
donut: 30
}
}
]
});
})
2개의 차트 컴포넌트를 하위속성으로 지정하니 코드가 괜히 길어져 보이는군요..
실행의 결과는 아래와 같습니다.
각 버튼들의 기능까지 확인해보고자 움짤로 준비를 해보았습니다. ▼
사이즈를 강제로 줄이다보니, 움짤의 잔상이 심하네요;;;
상단 코드를 실행하게 되면 위와같이 2개의 Gauge 그래프 2개가 생성되어 버튼을 누르게 되면, 수치를 가르기는 바늘이 애니메이션기능이 적용되어 지정값에 이동이 됩니다.
interval을 지정하여 초단위로 기능을 구현하려다가 단순하게 버튼클릭으로 기능을 구현하였습니다.
그럼, 부분코드에 대해서 간략하게(?) 설명을 진행하도록 하겠습니다.
제일번저 series config에 대해서 설명을 해보겠습니다.
gauge 차트니까 type이 'gauge'로 준것은 모두 아시겠고, field는 polar 컴포넌트 지정후, store에 value값으로 지정해준 데이터스토어 오브젝트 중, key값을 정의해주는 것입니다.
현재, rpm과 speed로 2개의 key값을 데이터스토어에 정의하였는데, 이중에서 첫번째는 rpm으로, 두번째는 speed로 필드값을 각각 지정해주었습니다.
neddle config는 true / false 값을 지정해주면 되는데, 값에 따라 화면 구성이 달라집니다.
needle의 값이 true일 경우, 움짤화면처럼 바늘형태로 수치가 변하게 됩니다.
만약 needle값을 false로 바꿀경우는? 부분영역을 채워주는 화면으로 구성되어 애니메이션 효과가 적용됩니다.
기존 화면 중, 속도를 나타내는 부분만 neddle 값을 false로 주고 다시한번 실행해보았습니다. ▼
화면상 true / false의 차이가 확연히 나타나는군요.
series 하위속성의 마지막인, donut의 값은 수치를 적용해주면 되는데, 그래프 하단의 볼록하게 나온 부분을 값에따라 변경이 되는 수치 값입니다.
그리고 polar 차트에서는 axes config 속성을 사용하지 않을거 같아보였는데, gauge 차트에서는 사용이 되는걸 알았습니다.
그외에 차트에서도 사용가능한지 한번 알아봐야 하겠군요..
axes의 하위 속성에서 title / type / minimum / maximum / majorTickSteps 는 이전에도 다루었기 때문에 생략하도록 하겠습니다.
대신, position이 'gauge'라고 되어있는대요.
position 축의 위치를 나타내는 위치를 정의하는 속성입니다.
보통 position에는 left / right / top / bottom 과 같은 위치값을 적용하게 되는데, X/Y축이 아닌 극좌표이고, 그중에서 'gauge' 라는 그래프 상단에 표시하기 위함으로 'position' 속성값을 'gauge'로 지정해준 것입니다.
그리고 패널의 툴바를 보면, 버튼이 총 6가지가 생성되었지만 데이터스토어 세팅값만 다를뿐, 모두 동일한 기능을 하는 녀석들입니다.
RPM과 Speed 모두 하나의 공통적인 데이터스토어를 이용하였습니다. 그래서 기존 적용된 데이터스토어의 객체를 setData Method를 이용하여 재정의 해주게 되면, 자동으로 그래프에 적용하게 됩니다.
기본적인 차트들에 대해서 모두 다루어 보았습니다.
해당 강좌들이 이글을 구독하시는 분들에게 유용하셨으면 좋겠습니다!
