ExtJS 강좌 - ExtJS5의 polar 타입 차트그래프 간단하게 알아보기

지난 포스팅은  xtype이 'cartesian'인 차트그래프에 대하여 알아보았습니다.

차트 연동 및 'cartesian' 차트 관련 내용은 하단을 참고해 주세요 ^^

2014/11/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5의 cartesian 타입 차트그래프 종류별로 출력해보기

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

polar 차트 역시 다양한 종류가 존재하나 간단하게 원형차트와 레이더 차트에 대하여 알아보도록 하겠습니다

polar 차트란?

원형인 각 축과 반경축을 사용하는차트를 의미합니다.

제일먼저 원형차트에 대한 코드를 확인해보도록 하겠습니다.

데이터 스토어는 이전 그래프 관련 포스팅을 참고해주세요.

1.원형(파이형) 그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 650,
    height: 500,
    title : '방문자통계',
    layout: 'fit',
    items: [
			{
			    xtype: 'polar',
			    insetPadding: 50,
			    innerPadding: 20,
			    series: [{
			        type: 'pie',
			        angleField: 'count',
			        label: {
			            field: 'date',
			            calloutLine: {
			                length: 60,
			                width: 3
			            }
			        },
			        highlight: true,
			        tooltip: {
			            trackMouse: true,
			            renderer: function(storeItem, item) {
			                this.setHtml(storeItem.get('date') + '일: ' + storeItem.get('count') + '명');
			            }
			        }
			    }],
			    //데이터 출력
			    store: chartStore
			}    
    ]
});

polar 차트는 별도로 'series' 내의 X/Y 좌표 설정을 하지 않습니다.

대신 'series' 속성내에 'angleField' 와 'label' 속성의 'field' 속성으로 데이터스토어 데이터를 화면에 출력시킵니다.

'highlight' 속성은 마우스 오버기능시, 케이크 잘라서 나누는 효과(?) 를 나타내기 위하여 적용해보았습니다.

원형(파이형) 그래프 실행결과

원형 차트내에서는 일자별로 출력이 되며 방문수는 원형 폭에 맞추어 출력이 되었습니다.

마우스 오버시 나누어 지는 효과는 highlight 속성으로 기능구현이 되었고 툴팁효과는 tooltip 속성으로 인하여 출력이 되었습니다.

2.레이더 그래프 차트컴포넌트

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: 650,
    height: 500,
    title : '방문자통계',
    layout: 'fit',
    items: [
			{
		    xtype: 'polar',
		    insetPadding: '40 40 60 40',
            interactions: ['rotate'],
            axes: [{
                type: 'numeric',
                position: 'radial',
                fields: 'count',
                renderer: function (v) { return v + '명'; },
                minimum: 0,
                grid: true
            }, {
                type: 'category',
                position: 'angular',
                grid: true
            }],
            series: [{
                type: 'radar',
                xField: 'date',
                yField: 'count'
            }],
		    //데이터 출력
		    store: chartStore
		}
    ]
});

보통 'polar' 그래프타입은 X/Y축이 없지만 레이더 차트는 XY 축을 선언합니다.

또한 interactions 속성을 통해서 출력된 그래프를 회전시킬수 있습니다.

레이더 그래프 실행결과

레이더그래프는 회전하는다트판을 연상시키게 하는 그래프 종류인거 같습니다.

지금까지 ExtJS에서 지원되는 대표적인 기본 컴포넌트들에 대하여 알아보았습니다.

다음 포스팅은 MVC 구조로 ExtJS 실습을 진행하도록 하겠습니다.

by 개발로짜