ExtJS6 스물한번째강의 - ExtJS 6 차트 가로/세로 막대그래프 컴포넌트 다루기( ExtJS 6 chart horizontal / vertical bar graph component handling)
ExtJS 6 차트 컴포넌트 강좌 영상은 링크를 통해 제공됩니다.
(YOUTUBE 채널 구독해주세요!!)
차트컴포넌트 이용하기
차트컴포넌트는 별도의 패키지를 이용해야 사용이 가능합니다.
app.json 에 requires 검색 후, "charts" 를 추가로 선언 후, 재빌드가 완료되면 차트컴포넌트 준비가 완료됐습니다.
차트컴포넌트 종류
① Ext.chart.CartesianChart 클래스를 이용하며, xtype으로는 'cartesian' 이라고 선언을 해주면 됩니다.
cartesian 컴포넌트의 경우, 보통 X,Y 축으로 구성되있는 막대,선,영역 그래프를 이용할때 사용되는
컴포넌트입니다.
② Ext.chart.PolarChart 클래스의 경우 xtype은 'polar' 로 선언을 하면 되고, cartesian컴포넌트에 비해 극좌표를 이용하는 그래프를 출력하고자 할때 사용되는 컴포넌트입니다.
예를들면 원형, 도넛차트,레이더차트,파이차트,가우지차트등을 표시할때 주로 사용되는 컴포넌트입니다.
cartesian 컴포넌트의 핵심 config 속성
axes : 그래프의 축(X/Y)을 정의하는 속성이며, 사용하고자 하는 type은 아래와 같이 3가지를 이용합니다.
① numeric : 숫자값을 표시하고자 할때 사용되는 type
② time : 날짜,시간값을 표시하고자 할때 사용되는 type
③ category : 데이터 포인트(카테고리)를 표시하고자 할때 사용되는 type
series : 모든 그래프(cartesian,polar) 컴포넌트에서 공통로직을 이용하기위한 클래스입니다.
series에서 정의할 수 있는 속성들은 라벨,하이라이트, 툴팁등 다양한 기능들을 포함시킬 수 있습니다.
3D 막대차트
axes에 정의된 type들과 series에 정의한 타입값 뒤에 '3d' 라고만 주어지면 3D 막대그래프 생성이 됩니다.
3D 막대그래프는 ExtJS 5.1 버전 이후부터 사용가능합니다.
세로막대 그래프 단일데이터 예제
위 코드를 3d 그래프 변경
가로막대 그래프 단일데이터 예제