ExtJS 기초강좌 31 - 체중변화 예제를 통한 영역차트(Area Chart) 출력편
이번에는 각 월별 체중변화에 대한 데이터들을 이용하여 영역차트(Area chart)에 대해서
출력 및 설명을 진행하겠습니다.
구축하고자 하는 시나리오는 다음과 같습니다.
3명의 각 월별 데이터를 이용하여 하나의 패널 컴포넌트내의 Area Chart로 구현을 한다
목적은 월별 개인의 체중변화 그래프를 보는것과 타인들과의 체중비교를 한눈에 보고자 한다.
우선 한명의 월별 체중변화에 대한 그래프를 먼저 출력시켜보도록 하겠습니다.
코드화 실행결과를 진행 후에 설명을 하도록 하겠습니다. ▼
Ext.onReady(function(){
Ext.create('Ext.Panel',{
renderTo : Ext.getBody(),
title : 'Area Chart',
width : 500,
height : 400,
layout : 'fit',
items : [{
xtype: 'cartesian',
store : Ext.create('Ext.data.Store',{
fields : ['date','weight1'],
data: [{
date : '1월',
weight1 : 63
},{
date : '2월',
weight1 : 62
},{
date : '3월',
weight1 : 61.7
},{
date : '4월',
weight1 : 68
},{
date : '5월',
weight1 : 72
},{
date : '6월',
weight1 : 80
}]
}),
insetPadding: '40 40 40 40',
axes: [{
type: 'numeric',
position: 'left',
title: '변화몸무게',
grid: true,
fields: ['weight1']
}, {
type: 'category',
position: 'bottom',
fields: 'date'
}],
series: [
{
type: 'area',
xField: 'date',
yField: 'weight1',
style: {
opacity: 0.60
}
}
// add
// add
]
}]
})
})
실행결과는 아래와 같습니다. ▼
코드부분에는 일반적으로 막대그래프나 선형차트와 별 차이가 보이지 않습니다.
단지, type이 'area'로 변경되었을 뿐이죠.
추가된 config 속성이 있다면, style config가 추가되어 그래프 영역의 투명값을 적용했다는것 정도입니다.
투명값을 적용을 하는 이유는 area chart 가 하나일 경우에는 사용하지 않아도 무관하겠지만,
여러개의 경우에는 중복되는 부분이 존재하기 때문에 투명도를 적용하여 겹치는 부분에 대한 부분까지 확실하게 확인할수 있습니다.
그럼 여러개의 데이터를 적용해야하기 때문에 데이터 스토어부분을 아래처럼 필드2개를 추가 후
데이터 값 역시, 임의로 추가해보겠습니다. ▼
Ext.create('Ext.data.Store',{
fields : ['date','weight1','weight2','weight3'],
data: [{
date : '1월',
weight1 : 63,
weight2 : 42,
weight3 : 54
},{
date : '2월',
weight1 : 62,
weight2 : 47,
weight3 : 53
},{
date : '3월',
weight1 : 61.7,
weight2 : 58,
weight3 : 52
},{
date : '4월',
weight1 : 68,
weight2 : 69,
weight3 : 48
},{
date : '5월',
weight1 : 72,
weight2 : 88,
weight3 : 44
},{
date : '6월',
weight1 : 80,
weight2 : 100,
weight3 : 41
}]
})
값을 추가하였다면,
이어서 "series" config 하단에 주석으로 //add 되어있는 영역들을 아래와 같이 채워줍니다. ▼
series: [
{
type: 'area',
xField: 'date',
yField: 'weight1',
style: {
opacity: 0.60
}
}
// add
,{
type: 'area',
xField: 'date',
yField: 'weight2',
style: {
opacity: 0.60
}
}
// add
,{
type: 'area',
xField: 'date',
yField: 'weight3',
style: {
opacity: 0.60
}
}
]
위와같이 변경을 해주었다면, 추가로 axes의 첫번째 하위항목의 fields 영역을 다음과 같이 변경해줍니다. ▼
{
type: 'numeric',
position: 'left',
title: '변화몸무게',
grid: true,
fields: ['weight1','weight2','weight3']
}
실행을 해보도록 하겠습니다. ▼
투명도를 적용하여 위와같이 각각의 차트들을 확인 할 수 잇겠지만.....
만약 투명도를 없앤다면? ▼
그래프의 영역들이 덮여져있기 때문에 투명도는 아마 필수가 되어야 할거 같군요..
현재는 3개의 예를 들어서 영역차트를 구성하였으나, 이후 더욱 많아질 것을 생각하면,
series config의 하위속성들을 함수화 시키는 법 또한 코드를 간결화 할수 있는 방법 중 하나입니다.
한번 함수화를 시켜서 코드를 재작성 해보도록 하겠습니다. ▼
Ext.onReady(function(){
Ext.create('Ext.Panel',{
renderTo : Ext.getBody(),
title : 'Area Chart',
width : 500,
height : 400,
layout : 'fit',
items : [{
xtype: 'cartesian',
store : Ext.create('Ext.data.Store',{
fields : ['date','weight1','weight2','weight3'],
data: [{
date : '1월',
weight1 : 63,
weight2 : 42,
weight3 : 54
},{
date : '2월',
weight1 : 62,
weight2 : 47,
weight3 : 53
},{
date : '3월',
weight1 : 61.7,
weight2 : 58,
weight3 : 52
},{
date : '4월',
weight1 : 68,
weight2 : 69,
weight3 : 48
},{
date : '5월',
weight1 : 72,
weight2 : 88,
weight3 : 44
},{
date : '6월',
weight1 : 80,
weight2 : 100,
weight3 : 41
}]
}),
insetPadding: '40 40 40 40',
axes: [{
type: 'numeric',
position: 'left',
title: '변화몸무게',
grid: true,
fields: ['weight1','weight2','weight3']
}, {
type: 'category',
position: 'bottom',
fields: 'date'
}],
series: [
getConfig('weight1'),
getConfig('weight2'),
getConfig('weight3')
]
}]
})
})
function getConfig(fields){
return {
style: {
opacity: 0.60
},
type: 'area',
xField: 'date',
yField: fields
}
}
getConfig 함수를 만들어서 series 의 하위항목들을 반환하는 function을 제작 후, series 하위항목에 적용하였습니다.
JSON 규격인대 내부적으로 function을 이용해서 혼란스러워하시는 분들도 계실테지만, ExtJS는 이런 식으로도 구현이 가능 합니다.
물론, 제가 한 방식과 컴포넌트 자체를 define 하여 function 제작해주는 방식 또한 약간 다릅니다.
실행결과는 기존 실행결과와 동일하므로, 별도의 결과는 생략하도록 하겠습니다.
