지난 강좌에는 ExtJS에서 제공하는 센차차트에 대해서 간략하게 설명을 진행하였습니다.



    이어서 차트관련 스크립트를 include 후에 간단한 막대그래프를 출력을 해보도록 하겠습니다.


    추가 INCLUDE 파일

    1장부터 진행해오신 분들이시라면 기존 작업 한 웹프로젝트 내에 "packages" 라는 폴더내에 ExtJS 관련 테마 디렉토리들을 INCLUDE 해놓았을 것입니다.


    만약 바로 검색해서 들어오신 분들이시라면 1장 연동부분을 참고해주세요 ▼


    INCLUDE 해준 파일들 중 우리는 "sencha-charts" 디렉토리 내에 존재하는 JS파일을 이용하여 차트를 출력해보도록 하겠습니다.


    ※ "ext-charts" 에 존재하는 JS 파일을 이용해서도 차트 출력이 가능하지만, ExtJS 5 기준으로는  "sencha-charts" 를 이용하는거 같습니다.


    기존 include 파일들을 아래와 같이 2가지 파일이 include 되어있을 것입니다. ▼

    
    <link href="./packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet">
    <script type="text/javascript" src="./ext-all.js"></script>
    
    

    상단 태그아래에 sencha-charts.js 파일을 include 해주도록 합니다. ▼

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

    통계청에서 제공한 "사회보험 가입률 현황"이라는 그래프 데이터를 예제로 동일한 화면을 출력해보도록 하겠습니다. ▼



    위와 같은 차트는 일명 "그룹 차트" 라고 합니다.

    제일먼저 X/Y 좌표와 막대그래프 차트를 출력시켜본 후, 자세하게 그래프 타이틀 및 차트 값 표출등에 대하여 상세하게 작성해보도록 하겠습니다.



    데이터 스토어 생성

    먼저 onload[Ext.onReady()] 안에 데이터스토어의 상단 이미지의 각각의 데이터값들을 담아서 변수에 담는 코드를 작성해보도록 합니다.

    
    var store = Ext.create('Ext.data.Store',{
      fields : ['insurance','man','woman'],
      data : [
        {insurance : '국민연금', man : 74.1, woman : 62.2 },
        {insurance : '건강보험', man : 77.8, woman : 64.4 },
        {insurance : '고용보험', man : 74.1, woman : 61.9 },
      ]
    });
    
    

    JSON Object에 "insurance / man / woman" 이라는 키를 적용 후, value값을 적용시킨 다음, 데이터스토어를 하나 생성하였습니다.

    그리고는 변수 "store"에 담아주었습니다.

    cartesian 그래프 컴포넌트 생성

    이어서 패널 컴포넌트에 "cartesian" 그래프컴포넌트를 생성 후, 기본적인 설정을 아래와 같이 지정해주도록 합니다. ▼

    
    Ext.create('Ext.Panel', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 500,
        layout: 'fit',
        items: [
        {
          xtype: 'cartesian',
          axes: [{
             type: 'numeric',
             position: 'left'
          }, {
            type: 'category',
            position: 'bottom'
         }],
         series: { 
            type: 'bar',
            axis: 'left',
            xField: 'insurance',
            yField: ['woman','man'],
            label: ['woman','man']
        },
       store: store
       }]
    });
    
    

    위의 코드를 대략적으로 설명해보자면, 패널컴포넌트 내에 cartesian 그래프 컴포넌트(X/Y 축이 존재할 경우 사용되는 XTYPE) 를 설정 후, axes / series 속성을 정의하였습니다. 그리고 그래프에 출력이 될 데이터는 이전 생성한 데이터스토어를 담은 변수를 적용시켜주었습니다.

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



    실행을 해봤더니, 하나의 X 축에 대하여 2개의 그래프가 출력이 되었지만, 우리가 원하는 각각의 그래프가 아닌, 두개가 통합이 되어 쌓이는 형식의 그래프가 출력이 되었습니다. 우리가 원하는 그래프가 아닙니다. 쌓여있는 그래프를 각각 나누고 싶습니다. ▼


    코드상 문제는 아무이상이 없습니다.

    그럼, 왜 두개로 나누어져있지 않는것인가?

    답은 사소한 문제에 있습니다. 

    이유는 "series" 속성에 stacked 속성이 빠져잇기 때문입니다.

    그래프 차트 역시 수많은 속성들이 존재하기 때문에 DOCUMENT 문서를 보면서 적용하는것을 추천드립니다.

    기존 컴포넌트를 문서보면서 적용하신 분들이시라면 크게 어려움이 있지 않을 것입니다.

    그렇다면 series 속성내에 아래와같은 코드를 추가해주도록 합니다. ▼

    
    series: {
       //Add config
       stacked: false,
       type: 'bar',
       axis: 'left',
       xField: 'insurance',
       yField: ['woman','man'],
       label: ['woman','man']
    },
    
    

    다시 실행을 해보았습니다. ▼


    정상적으로 통계청으로부터 참고한 그래프 화면이 동일하게 출력되어습니다.

    부가적으로 몇가지 config 속성을 이용하여 조금 더 통계청 관련 그래프와 유사하게 그래프를 좀 더 다듬어보도록 하겠습니다.


    ※ 데이터 스토어변수는 동일하므로, 생략하고 컴포넌트 부분만 속성 추가 및 변경을 하였습니다. ▼

    
    Ext.create('Ext.Panel', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 500,
        layout: 'fit',
        items: [
                {
                    xtype: 'cartesian',
    				// New Config
    				title : '사회보험 가입률 현황',
    				// New Config
    				insetPadding: '40 40 40 20',
                    axes: [{
                        type: 'numeric',
                        position: 'left',
    	   	   //New Config
    		   majorTickSteps: 10,
    		   // New Config
    		   maximum : 100,
    		   // New Config
    		   grid : true,
    		   // New Config
    		  title : '(%)'
                    }, {
                        type: 'category',
                        position: 'bottom'
                    }],
                    series: {
    		   //Add config
    		   stacked: false,
                        type: 'bar',
                        axis: 'left',
                        xField: 'insurance',
                        yField: ['woman','man'],
    					//Update config
    					label: {
    						field: ['woman','man'],
                                                    display: 'outside'
    					}
                    },
                    //데이터 출력
                    store: store
                }
        ]
    });
    
    

    추가된 속성들을 알앙보도록 하겠습니다.

    title

    그래프의 타이틀을 작성을 위한 속성

    insetPadding 

    패널내에 출력되는 그래프외부의 패딩값 "위 오른쪽 아래 왼쪽"

    axes 

    JSON Object형식으로 2개로 분류가 되어있습니다. 

    순서는 상관없고 position과 type에 따라 달라집니다.  

    첫번째 JSON규격에 들어가있는 부분이 Y축에 해당됩니다.

    두번째 JSON규격에 들어가 있는 부분은 X축에 해당됩니다.

    axes → majorTickSteps 

    Y축에 표시되는 값에 대한 간격입니다. 

    5씩 간격이 자동으로 잡혀있던 부분을 10으로 주어서 가격을 10으로 설정해주었습니다.

    axes → maximum

    Y축의 최대치입니다. 퍼센트율을 보이므로 100으로 설정해주었습니다.

    axes → grid

    true / false 속성을 가지는데 Y축기준으로 그리드 선을 그려줍니다. 

    position : 'bottom' 영역에도 grid 속성을 적용해주면 세로로 그리드 선이 그려지게 됩니다.

    axes → title

    Y축의 타이틀을 작성합니다.

    series → label 

    field의 해당되는 value값이 기존에는 label 속성을 차지하였습니다. 

    그러나 각 그래프들의 값을 화면상 표출시켜주기 위하여 변경을 해주었습니다. 

    막대그래프의 display 방식에는  "insideStart" | "insideEnd" | "outside" 이렇게 3가지를 지원합니다. display 값을 변경해서 결과값은 개별로 확인해보길 바랍니다. 


    그럼 실행을 해보도록 하겠습니다. ▼



    정상적으로 통계청에서 참고한 그래프와 거의 동일하게 출력되었습니다.

    외부자료를 참고하여 그래프를 출력해보았습니다.

    다음은 각 그래프들에 관하여 다뤄보는 시간을 가져보도록 하겠습니다. 


    Posted by 몽고