ExtJS에서 제공하는 차트그래프에 대해서 알아보도록 하겠습니다.

    이번장에서는 컴포넌트 출력관련 강좌가아닌, ExtJS에서 제공하는 센차차트(Sencha Chart)의 종류 

    및 중요한 config 속성에 대해서 간단하게 설명을 진행하고자 합니다.


    ExtJS에서 제공하는 차트의 종류는 아래와 같습니다. ▼

    Column Charts

    Bar Charts

    Line Charts

    Area Charts

    Scatter Charts

    Financial Charts

    Pie Charts

    Radial Charts

    Gauge Charts

    Combination Charts


    ExtJS 5.1버전부터 3D 차트 그래프가 추가가 되어 이전보다 화려한 그래프 표현이 가능합니다.

    차트관련 클래스는 2가지가 존재합니다. ▼

    Ext.chart.CartesianChart (xtype : cartesian)

    Ext.chart.PolarChart (xtype : polar)


    위 2가지의 xtype이 존재하면, 만들고자하는 차트의 종류에 따라 선택해서 사용하여야 합니다.

    첫번째로 cartesian 차트의 경우는 X축과 Y축으로 구성되어있는 막대그래프, 선형그래프, 영역그래프등을 이용하고자 할때 사용되는 타입입니다. 

    중요한것은 "XY 축으로 구성이 되어있는가" 로 결정을 지으시면 되겠습니다. ▼



    두번째로는 polar 차트인대, 이 타입의 경우에는 극좌표를 사용하여 그래프를 나타냅니다.


    원형 그래프 (레이더차트, 파이차트) 가 일반적으로 예를 들 수 있겠습니다. ▼



    그리고 차트 컴포넌트의 경우, 이전에 다루었던 컴포넌트의 config들에 비해 복잡한 편입니다.

    거의 차트마다 사용되는 config 들중에서 대표적인 속성에 대해서 간략하게 설명을 해보겠습니다.


    axes

    그래프의 축을 정의하는 config

    센차차트는 축의 3가지 다른유형을 제공합니다.

    numeric축의 데이터는 연속적인 숫자 값

    time축의 데이터는 연속적인 날짜/시간 값

    category축은 데이터 포인트를 축에 끼고 균등하게 배치

    축의 부분과 축의 레이아웃의 종류를 설정함으로써 축의 동작을 쉽게 변경할 수 있습니다.


    series

    series는 모든 그래프 계열의 공통로직을 포함한 추상클래스입니다.

    series는 라벨과 하이라이트, 툴팁등의 메서드가 포함되어있습니다.


    그리고 위에 간단하게 적어놓았다시피, 

    ExtJS 5.1부터 3D 차트 컴포넌트들이 추가로 생성되었습니다. ▼







    지금까지 차트 컴포넌트에대해서 간단하게 설명 및 소개를 해보았습니다.

    다음장부터는 cartesian 을 이용한 막대그래프 컴포넌트를 한번 출력시켜보도록 하겠습니다.

    신고
    Posted by 몽고