ExtJS 기초강좌 33 - 원형차트(Pie Chart)로 파이,도넛,3D차트를 구현해보자


	var store = Ext.create('Ext.data.Store',{
				   	 fields : ['browser', 'rate'],
				     data: [{browser : 'Chrome',rate : 61.02},
							{browser : 'IE',rate : 28.98},
							{browser : 'Safari',rate : 6.82},
							{browser : 'Firefox',rate : 1.39},
							{browser : '(not set)',rate : 0.98},
							{browser : 'Android Browser',rate : 0.60},
							{browser : 'Safari(in-app)',rate : 0.16},
							{browser : 'Maxthon',rate : 0.03},
							{browser : 'YaBrowser',rate : 0.02}]
				 });

원형차트 컴포넌트를 생성하기 위한 코드는 아래와 같습니다. ▼


	Ext.create('Ext.Panel', {
		renderTo : Ext.getBody(),
        layout: 'fit',
        width: 650,
        items: [{
        		 xtype: 'polar',
        		 insetPadding: 50,
                 innerPadding: 20,
        		 width: '100%',
                 height: 500,
                 store : store,
                 series: [{
                     type: 'pie',
                     angleField: 'rate',
                     label: {
                         field: 'browser'
                     }
                 }]
           }]
    });

실행결과를 확인하기 전, 이전 'cartesian' 차트에서 존재했던 axes config 속성이 생략되었습니다.

'polar' 차트의 경우, X/Y축이 없으므로 axes를 따로 설정해주지 않아도 되는듯 하군요.

대신, series config 즉, 화면상 출력되도록 설정하는 config에서 보게되면 angleField 라는 속성이 있는대요.

이 속성은 원형차트에 각 조각을 내는 녀석을 설정해주면 되겠습니다.

원형은 보통 100% 기준으로 잡고 각각의 조각을 낼때 해당 백분율로 화면을 출력시켜주니, 저희가 정의했던 데이터 스토어에서 백분율을 나타내는 데이터는 rate가 되겠군요.

그리고 label 속성은 각각의 조각들이 어떤 데이터에 대한 조각인지를 표현시켜주고자하는 라벨 속성입니다.

label → field 속성값으로 browser 를 주었지만, rate를 주어도 무관합니다.

그럼 실행결과를 확인해 보도록 하겠습니다. ▼

결과를 보다시피, 상단 샘플로 제공했던 애널리틱스의 데이터와 동일한 화면이 나타났습니다.

하지만, 백분율이 낮은 값들이 몰려있는 부분에는 라벨이 겹치는 현상이 발생되어 지저분하군요.

해당 출력되는 부분은 데이터스토어에 나열된 오브젝트 순서대로 나타나는 것이기 때문에 큰값과 작은값을 교차하여 데이터스토어를 재정의 해보았습니다. ▼

몇개의 데이터가 조금 더 정렬되긴 하였으나, 여전히 글자가 겹칩니다..

어쩔수 없이 툴팁을 사용해봐야 겠습니다.

툴팁이란 마우스 오버시 특정영역에 메시지를 출력할때 사용되는 기능입니다.

이전 차트에서도 동일하게 사용되는 기능이지만, 언급을 하지 않았습니다.

이번 강좌에서는 어쩔수없이 툴팁을 이용하여 정리를 해봐야 겠군요.

하단코드를 series 하위속성으로 추가해줍니다.▼


tooltip: {
    trackMouse: true,
    renderer: function(storeItem, item) {
         this.setHtml(storeItem.get('browser') + ': ' + storeItem.get('rate') + '%');
    }
}

툴팁 속성들 중, trackMouse는 마우스 포인터를 따라서 해당 영역의 툴팁창을 보여주는것입니다. false를 지정해주어도 무관합니다.

그리고 툴팁 내에 출력되는 메시지는 renderer 속성을 이용하여 문구를 작성해주시면 되겠습니다.

저는 데이터스토어에 정의한 "브라우저 : 백분율" 문구로 렌더링을 해주었습니다. ▼

마우스포인트에 위치하는 각각의 조각들에 따라 툴팁이 변경되는것을 확인하였습니다. 그렇다면, 원형차트 중앙에 구멍을 내어서 도넛차트로 출력을 시켜보도록 하겠습니다.

가운데 구멍을 뚫는것은 donut config 속성만으로 충분히 나타낼 수 있습니다.

series 하위속성에 donut 속성을 추가해보도록 합니다. ▼


series: [{
                     type: 'pie',
                     //추가된 속성
                     donut: 50,
                     angleField: 'rate',
                     label: {
                         field: 'browser'
                     },
                     tooltip: {
                         trackMouse: true ,
                         renderer: function(storeItem, item) {
                             this.setHtml(storeItem.get('browser') + ': ' + storeItem.get('rate') + '%');
                         }
                     }
                 }]

실행결과입니다. ▼