이전강좌까지 type이 'cartesian' 

    즉, X/Y 좌표로 구분이 되는 그래프 차트에 대한 강좌를 진행했었습니다.




    cartesian 그래프 중 제외된 강좌가 있습니다.

    그건 바로, Financial Chart 인대요. 주식과 같은 경제관련 그래프를 출력할때 사용되는 차트입니다.

    하지만, 이 차트를 출력하는 것은 쉽지만, 각 config에 대한 사용법을 제대로 알고난 후 추후 다루도록 하겠습니다.




    그래서 이번장부터 차트컴포넌트의 타입이 'cartesian'이 아닌, 'polar' 에 대해서 강좌를 진행해볼까 합니다.


    제일먼저, 원형차트라고 불리는 원형차트(Pie Chart)에 대한 강좌를 시작하려합니다.





    상단 차트는 '구글 애널리틱스'에서 제공하는 브라우저별 본인 블로그에 방문하는 방문자분들의 통계를 원형 그래프를 제공해준 이미지 입니다.



     브라우저명

    점유율 

     Chrome

     61.02%

     IE

     28.98%

     Safari

    6.82% 

     Firefox

    1.39% 

     (not set)

    0.98%

     Android Browser

    0.60%

     Safari(in-app)

     0.16%

     Maxthon

     0.03%

     YaBrowser

     0.02%



    상단 브라우저명과 점유율을 이용하여 파이차트를 생성해보도록 하겠습니다.

    제일먼저 데이터 스토어로 데이터를 가공해주도록 합니다. 

    (Ext.onReady 내에 지정하는거는 기존에도 계속해서 알려드렸던 내용입니다.)

    
    	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') + '%');
                             }
                         }
                     }]
    
    

    실행결과입니다. ▼





    동일한 화면과 기능을 유지한채, 가운데 구멍이 뚫려서 도넛차트가 완성이 되었습니다. 

    이어서 3D 차트를 만들기 위해서는 이전 막대그래프에서도 다뤘듯이 series → type명만 변경을 해주시면 되겠습니다. 

    기존 type : 'pie' 을 type : 'pie3d' 로변경을 해주시면 되겠습니다. 

    실행결과는 donut 속성을 주었을때와 제외하였을때의 결과를 각각 출력해보았습니다. 







    화려하게 원형차트들이 출력 되었군요.



    3D pie의 경우는 무슨 문제인지 정확히 모르겠지만, 툴팁이나 라벨에 대한 결과물이 출력이 되지 않고있습니다.





    ExtJS 6에서는 제대로 동작이 되는것 같지만... 버그의 한종류라고 하는거 같은대... 추후 제대로 확인되면 댓글 또는 포스팅글로 답변을 드리도록 하겠습니다.


    지금까지 원형차트에 대해서 알아보았습니다.








    Posted by 몽고