ExtJS 기초강좌 27 - 세로형 막대 그래프 차트 알아보기
ExtJS에서 제공하는 센차차트의 종류들을 하나씩 진행을 해보도록 하겠습니다.
이번장에서 다루어볼 차트의 종류는 "세로형 막대 그래프" 입니다.
Bar Chart 이긴하나, ExtJS의 예제에서는 아래와 같이 구분을 주는거 같습니다. ▼
세로형 막대그래프 - Column Chart
가로형 막대그래프 - Bar Chart
종류는 나뉘지만, 사용하는 type은 둘다 'bar'를 이용합니다.
지난 시간에 그래프 연동을 하면서 대부분을 설명하고 연동을 해보았지만, 기본 그래프화면에 대해서 출력을 해보도록 하겠습니다.
전 강좌에 대해 재언급을 해보자면, 센차차트는 데이터스토어와 연결이 필수입니다.
트리나 그리드와 거의 비슷한 연결방식이라고 생각하시면 되겠습니다.
그렇다면, 간단한 1차원적인 세로형 막대그래프를 출력시켜보도록 하겠습니다.
코드는 아래와 같습니다. ▼
Ext.onReady(function(){
var store = Ext.create('Ext.data.Store',{
fields : ['date','count'],
data : [
{date : '7/20', count : 52},
{date : '7/21', count : 58},
{date : '7/22', count : 22},
{date : '7/23', count : 36},
{date : '7/24', count : 14},
]
});
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 400,
layout: 'fit',
items: [
{
xtype: 'cartesian',
title : '막대그래프 예제1',
axes: [{
type: 'numeric',
position: 'left',
title : '방문자수'
}, {
type: 'category',
position: 'bottom',
title : '일자'
}],
series: {
type: 'bar',
axis: 'left',
xField: 'date',
yField: 'count',
label: {
field: 'count',
display: 'insideEnd'
}
},
store: store
}
]
});
})
이전 연동부분에서 대부분 처리를 해놓은터라 심플하게 느껴지는군요.
실행결과를 보고 설명을 진행하겠습니다. ▼
실행결과, 각 일자별마다 방문자수에 대한 막대그래프가 생성이 되어있습니다.
그럼 각 코드들의 일부를 나누어 설명을 진행하겠습니다.
var store = Ext.create('Ext.data.Store',{
fields : ['date','count'],
data : [
{date : '7/20', count : 52},
{date : '7/21', count : 58},
{date : '7/22', count : 22},
{date : '7/23', count : 36},
{date : '7/24', count : 14},
]
});
위에 보시면, 데이터스토어에 date / count 키를 가진 JSON 형식으로 각각 설정을 해주었습니다.
현재는 memory 형식으로 값이 설정이 되어있지만, proxy 타입을 ajax로 지정하고 URL 호출하여 JSON을 받아오셔도 무관합니다.
비동기 호출방식은 이후에 다루도록 해보겠습니다.
Q : date의 JSON 형식으로 Key를 정해주었는데, 순서대로 X/Y 값이 결정 되는것인가요?
A : 아닙니다, X/Y값에 대한 설정은 series 속성의 xField / yField 속성들의 value값을 데이터스토어에 담겨있는 JSON의 Key 값을 선언해줌으로써 X/Y 값이 결정되는 것입니다.
이어서 패널의 자식항목으로 xtype: 'cartesian' 을 주었습니다.
세번째 반복해서 말씀드리는거 같지만, 계속 알아두어야 하므로, 여러 그래프들 중에서 X/Y 좌표에 대한 구분을 나타내는 차트들은 모두 'cartesian' 타입을 이용해야합니다.
axes 속성으로 각 XY 축에 대한 설정을 정의해주고, series 속성으로 그래프의 여러 화면적인 구성요소에 대한 속성을 정의합니다.
현재 진행한 그래프의 형태가 세로형 막대그래프의 가장 기본적인 틀이 되는 것입니다.
Stacked vs Group
출력했던 그래프는 막대그래프의 기본틀이며, 추가로 하나의 컬럼(?) 에 두개 이상의 그래프 표현도 가능합니다.
이전에 그래프 연동을 하면서 그룹차트에 대해서 출력을 했었는대요.
"Stacked" → 하나의 막대그래프에 구분자를 주어 쌓는 그래프를 의미합니다.
"Group" → Stacked 와는 다르게 쌓이는 것이 아니고 X 축에 해당되는 하나의 값에 여러개의 그래프가 나열을 하는 형태를 의미합니다.
지난 시간에도 설명드렸다시피, Stacked config에 따라 Stacked Chart 가 될수있고, Group Chart가 될수도 있습니다.
그럼 26장에서 사용했던 코드에 추가로 덧붙여서 Stack 과 Group 차트가 변경이 되는 기능을 구현해보도록 하겠습니다. ^^
코드와 실행결과를 본 다음, 추가된 코드에 대해서 설명을 진행해보도록 하겠습니다.
Ext.onReady(function(){
var store = Ext.create('Ext.data.Store',{
fields : ['insurance','man','woman'],
data : [
{insurance : '국민연금', man : 74.1, woman : 62.2 },
{insurance : '건강보험', man : 77.8, woman : 64.4 },
{insurance : '고용보험', man : 74.1, woman : 61.9 },
]
});
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
width: 500,
height: 500,
layout: 'fit',
fbar : [{
xtype : 'button',
text : 'Stack Chart',
handler : function(btn) {
Ext.getCmp("chart").getSeries()[0].setStacked(true);
Ext.getCmp("chart").getAxes()[0].setMaximum(150)
Ext.getCmp("chart").redraw();
}
},{
xtype : 'button',
text : 'Group Chart',
handler : function(btn) {
Ext.getCmp("chart").getSeries()[0].setStacked(false);
Ext.getCmp("chart").getAxes()[0].setMaximum(100);
Ext.getCmp("chart").redraw();
}
}],
items: [
{
xtype: 'cartesian',
id : 'chart',
title : '사회보험 가입률 현황',
insetPadding: '40 40 40 20',
axes: [{
type: 'numeric',
position: 'left',
majorTickSteps: 10,
maximum : 100,
grid : true,
renderer: function (v) { return v.toFixed(v < 10 ? 1: 0) + '%'; }
}, {
type: 'category',
position: 'bottom'
}],
series: {
stacked: false,
type: 'bar',
axis: 'left',
xField: 'insurance',
yField: ['woman','man'],
label: {
field: ['woman','man'],
display: 'insideEnd'
}
},
store: store
}
]
});
})
실행결과는 다음과 같습니다. ▼
추가된 코드에 대해서 설명을 드리도록 하겠습니다.
1. 이전 코드에서 상단에 생성되어있는 패널컴포넌트의 툴바를 생성하여 그 안에 하위항목으로 버튼 2개를 추가하였습니다.
2. Ext.getCmp("target_id").getSeries()[0].setStacked(true/false) → ExtJS의 METHOD를 이용해서 GET/SET을 정의하는 것입니다.
눈치로 이해가 되시는 분들도 계시지만, 잘 모르시는 분들을 위해서 각각 나누어서 요약을 해보겠습니다.
① Ext.getCmp("target_id") : Javascript의 document.getElementById("id")와 유사한 개념으로 알고개시면 됩니다.
HTML태그의 id를 선언하고 자바스크립트에서 document.getElementById("id")로 엘리먼트를 획득할수 있습니다.
ExtJS에서도 컴포넌트의 id config를 지정해주게 되면 Ext.getCmp("id")를 이용하여 컴포넌트의 객체를 획득 할수 있습니다.
② getSeries[0] : 차트의 config 속성중에서 series 를 정의해주었습니다. series 속성내의 stacked 속성을 설정해주기전에 series의 Object를 획득하기위해서 사용한 method 입니다. 조금 더 궁금하신 분들이 계시면 Document 문서를 참고하세요.
③ setStacked(true/false) : Stacked 으로 출력할것인가 Group으로 출력하신가에 대한 설정을 주기 위함입니다.
3. Ext.getCmp("target_id").getAxes()[0].setMaximum(value) → 이 설정을 따로 준 이유는 현재 최대값이 100이어서 Stacked로 변경이 될 경우 100이 초과되므로 Y축의 맥시멈값이 잘리는 현상이 나타나서 설정을 해주었습니다.
여기서 getAxes()[0] >>> 주의해야 할점은 현재 제 코드상에는 axes을 정의할때, 2개의 json Object가 선언되어있습니다.
만일, position이 'left'로 준 영역이 첫번째 Object가 아니고 두번째 Object 에 선언이 되어있을 경우는 아래와같이 변경해주어야 합니다. ▼
Ext.getCmp("target_id").getAxes([1].setMaximum(value)
마지막으로는 변경을 해준 series 와 axes에 대해서 새로 화면을 그려야 하므로 redraw() 메서드를 이용해서 다시 그려지게 해주었습니다.
Method 영역에 대해서는 자세하게 다루지 않았다보니, 이해하기 어려우실거라 생각이 됩니다.
하지만, Method의 경우에는 본인이 사용하고자 하는 타입이 광범위 하므로, 만약 제가 강의를 진행하면서 위와같이 대략적으로 설명을 드리겠으나, 이해가 되지 않으신다면 Document 문서로 해당 Method를 검색하셔서 기능을 확인하시는게 이해하시기가 빠르실거라 판단됩니다 ^^
지금까지 세로형막대그래프(Column Chart)에 대해서 알아보았습니다.
