ExtJS 강좌 - ExtJS5의 cartesian 타입 차트그래프 종류별로 출력해보기

이번에는 ExtJS5에서 제공되는 차트컴포넌트를 구현해보도록 하겠습니다.

예전 ExtJS강좌의 첫번째 포스팅부분에서 extjs gpl 버전 다운받으신다음 

해당 압축해제 파일들을 삭제하지 말아달라고 요청드렸었죠?

2014/10/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편

이제는 차트 구현을 하기위해서는 

이미 빌드되어있는 폴더 하나를 프로젝트 경로에 추가하도록 하겠습니다.

"/extjs-5.0.x/build/packages/" 디렉토리를 보시면 

다음과 같은 2가지 종류의 차트관련 폴더를 확인 하실 수 있으실 겁니다.

2종류의 차트의 차이점을 확인한 결과 

ExtJS5이전버전인 ExtJS4.x 버전에 사용가능한 차트를 "ext-charts" 디렉토리에 빌드해놓았고 

ExtJS5부터 신규로 빌들된 차트는 "sencha-charts" 디렉토리내에 빌드를 해놓았습니다.

확인결과 차트호출관련 xtype 만 별도로 차이를 두었을뿐 크게 차이가 나지는 않는것같습니다.

저희는 ExtJS5로 꾸준히 진행을 해왔으므로 

"sencha-charts"디렉토리를 기존 ExtJS 테마들을 넣어놓은 디렉토리내에 INCLUDE 하도록 하겠습니다.

그럼 차트관련 JS파일을 기존 ExtJS JS/CSS 파일 INCLUDE되어있는 

HTML/JSP/PHP 파일내에 INCLUDE 하도록 합니다.

<script type="text/javascript" src="/extjs/sencha-charts/build/sencha-charts.js"></script>

지원하는 차트 종류는 어마어마하게 많지만 자주 사용되는 일부차트컴포넌트만 

일부 샘플로 제작하여 맛보기삼아서 만들어보도록 하겠습니다.

ExtJS의 차트컴포넌트 종류는 'cartesian' 타입과 'polar' 타입으로 나누어 볼 수 있겠는데 

이번 포스팅은 'cartesian' 종류의 컴포넌트를 다루어 보도록 하겠습니다.

cartesian 차트란?

X/Y 좌표 두방향을 갖는 직교좌표입니다.

flipXY 속성으로 그래프 방향변경이 가능합니다.

샘플화면은 티스토리에서 기본적으로 제공하는 방문자수 그래프 데이터를 기준으로 예를 들어볼까 합니다 

전체 샘플코드에서 동일한 데이터 스토어는 변수에 담아서 사용할 예정이므로 

다음처럼 Ext.onReady 내에 정의해주세요

var chartStore = Ext.create('Ext.data.Store',{
			    	fields : ['date','count'],
			    	data : [
			    	        {date : '10',count : 305 },
			    	        {date : '11',count : 335 },
			    	        {date : '12',count : 329 },
			    	        {date : '13',count : 360 },
			    	        {date : '14',count : 298 },
			    	        {date : '15',count : 77 },
			    	        {date : '16',count : 99}, 
			    	        {date : '17',count : 130 }
			    	       ]
			    })

차트컴포넌트 관련코드 또한 Ext.onReady안에 정의해주세요

1.세로형 막대그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 650,
    height: 500,
    title : '방문자통계',
    layout: 'fit',
    items: [
            {
			    xtype: 'cartesian',
			    //위치
			    axes: [{
			        type: 'numeric',
			        position: 'left',
			        minimum: 0
			    }, {
			        type: 'category',
			        position: 'bottom'
			    }],
			    //차트타입
			    series: {
			        type: 'bar',
			        axis: 'left',
			        xField: 'date',
			        yField: 'count',
			        //그래프 내에 출력할 값
			        label: {
	                    field: 'count',
	                    display: 'insideEnd'
	                }
			    },
			    //데이터 출력
			    store: chartStore
			}
    ]
});

위에 보게되면 ExtJS 4.x 버전에서는 xtype : 'chart' 였었던 컴포넌트가 'cartesian' 이라고 변경이 되었습니다.

그리고 axes / series / store 속성은 

차트컴포넌트에서 패키지로 따라다니는 속성들이라고 생각하시면 되겠습니다.

'axes' 속성의 경우, 가로/세로의 축을 정의해주는 속성이며

'series' 속성의 경우는 차트컴포넌트의 타입 및 각 화면에 출력하고자 하는 값들의 정의를 나타내는 속성입니다.

세로형 막대그래프 실행결과

2.가로형 막대그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 650,
    height: 500,
    title : '방문자통계',
    layout: 'fit',
    items: [
		//가로형 막대차트컴포넌트
		{				
		    xtype: 'cartesian',
		    flipXY: true,
		    //위치
		    axes: [{
		        type: 'numeric',
		        position: 'bottom',
		        minimum: 0
		    }, {
		        type: 'category',
		        position: 'left'
		    }],
		    //차트타입
		    series: {
		        type: 'bar',
		        xField: 'date',
		        yField: 'count',
		        //그래프 내에 출력할 값
		        label: {
                    field: 'count',
                    display: 'insideEnd'
                }
		    },
		    //데이터 출력
		    store: chartStore
		}
    ]
});

가로형 막대그래프는 세로형과 다른점이 있다면 

축설정 axes 속성에 position이 변경되었으며 flipXY 속성을 TRUE로 지정을 해주셔야 

가로형으로 차트출력이 가능합니다.

가로형 막대그래프 실행결과

3.라인형(선형) 그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 650,
    height: 500,
    title : '방문자통계',
    layout: 'fit',
    items: [
		//라인형 차트
		{
		    xtype: 'cartesian',
		    //위치
		    axes: [{
		        type: 'numeric',
		        position: 'left',
		        minimum: 0
		    }, {
		        type: 'category',
		        position: 'bottom'
		    }],
               series: [{
                   type: 'line',
                   xField: 'date',
                   yField: 'count',
                   //결과값을 그래프에 출력하기 위한 속성
                   label: {
                       field: 'count',
                       display: 'over'
                   }
               }],
		    //데이터 출력
		    store: chartStore
		} 
    ]
});

선형 그래프는 맨위에 티스토리 통계 이미지를 출력한 그래프와 동일한 화면구성을 해주는 그래프입니다.

"series" 속성의 type이 'line'으로 변경된 점과 label 속성으로 그래프에 출력시켜준 속성이 변경 혹은 추가되었습니다.

라인형(선형)그래프 실행결과

위와같이 출력이 되었으나 화면이 넘쳐서 label 부분에 대한 

숫자값이 잘려보이는 현상이 발생합니다.

이 간격을 약간 조정을 해주기 위하여 "insetPadding","innerPadding" 속성을 

다음처럼 xtype: 'cartesian', 다음라인에 추가해주도록 합니다

insetPadding: 40,
innerPadding: {
     left: 40,
     right: 40
}, 

라인형 그래프 영역조정 후 재실행결과

위처럼 전체적으로 그래프사이즈가 줄어든 것을 확인하였습니다.

4.분산형 그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
	   renderTo: Ext.getBody(),
	   width: 650,
	   height: 500,
	   title : '방문자통계',
	   layout: 'fit',
	   items: [
		{
		    xtype: 'cartesian',
		    //============간격조정============
		    insetPadding: 40,
		    innerPadding: {
		        left: 40,
		        right: 40
		    },
		    //============간격조정============
		    //위치
		    axes: [{
		        type: 'numeric',
		        position: 'left',
		        minimum: 0
		    }, {
		        type: 'category',
		        position: 'bottom'
		    }],
		    series: [{
		        type: 'scatter',
		        xField: 'date',
		        yField: 'count',
		        tooltip: {
		            trackMouse: true,
		            renderer: function(storeItem, item) {
		                this.setHtml(storeItem.get('date') + '일 : ' + storeItem.get('count') + ' 명');
		            }
		        }
		    }],
		    //데이터 출력
		    store: chartStore
		}
    ]
});

분산형그래프 코드에서 기존 그래프 컴포넌트들과 차이라면 

'series' 타입이 'scatter'이라는 점과 tooltip 속성이 추가되었다는 점입니다.

툴팁속성은 출력된 분산형 그래프에 마우스오버를 하게되면 

해당 그래프에 대한 데이터 결과값이 툴팁처럼 출력이 되어 나타나는 속성입니다.

※ 툴팁은 타그래프에서도 사용가능한 기능입니다.

분산형 그래프 실행결과

'cartesian' 타입의 마지막 샘플인 "영역형 그래프"에 대한 샘플코드를 보도록 하겠습니다.

5.영역형 그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 650,
    height: 500,
    title : '방문자통계',
    layout: 'fit',
    items: [
	 {
		    xtype: 'cartesian',
		    //============간격조정============
		    insetPadding: 40,
            //============간격조정============
		    //위치
		    axes: [{
		        type: 'numeric',
		        position: 'left',
		        minimum: 0
		    }, {
		        type: 'category',
		        position: 'bottom'
		    }],
               series: [{
                   type: 'area',
                   xField: 'date',
                   yField: 'count',
                   //툴팁
                   tooltip: {
                       trackMouse: true,
                       renderer: function(storeItem, item) {
                           this.setHtml(storeItem.get('date') + '일 : ' + storeItem.get('count') + ' 명');
                       }
                   }
               }],
		    //데이터 출력
		    store: chartStore
		}
    ]
});

영역형 그래프 실행결과

지금까지 xtype이 'cartesian'인 차트 종류에 대하여 알아보았습니다.

다음 장에는 간단하게 xtype이 'polar'인 차트에 대하여 포스팅 해보도록 하겠습니다 .^^ 

by 개발로짜