ExtJS6 스물한번째강의 - ExtJS 6 차트 가로/세로 막대그래프 컴포넌트 다루기( ExtJS 6 chart horizontal / vertical bar graph component handling)

ExtJS 6 차트 컴포넌트 강좌 영상은 링크를 통해 제공됩니다.

(YOUTUBE 채널 구독해주세요!!)

https://youtu.be/PKMBsJ_Z31E

차트컴포넌트 이용하기

차트컴포넌트는 별도의 패키지를 이용해야 사용이 가능합니다.

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 버전 이후부터 사용가능합니다.

세로막대 그래프 단일데이터 예제

	Ext.create("Ext.panel.Panel",{
	width : 500,
	height : 500,
	renderTo : Ext.getBody(),
	layout : 'fit',
	items : [{
	xtype : 'cartesian',
	store : {
	fields : ['subject','score'],
	data : [{
	subject : '국어',
	score : 100
	},{
	subject : '영어',
	score : 46
	},{
	subject : '수학',
	score : 82
	},{
	subject : '과학',
	score : 55
	},{
	subject : '사회',
	score : 23
	}]
	},
	//
	axes : [{
	//Y
	type : 'numeric',
	position : 'left',
	title : '(점)'
	},{
	//X
	type : 'category',
	poistion : 'bottom'
	}],
	series : {
	//CHART TYPE
	type : 'bar',
	//X FIELD
	xField : 'subject',
	//Y FIELD
	yField : 'score'
	}
	}]
	})

view raw Sample1.js hosted with ❤ by GitHub

위 코드를 3d 그래프 변경

	Ext.create("Ext.panel.Panel",{
	width : 500,
	height : 500,
	renderTo : Ext.getBody(),
	layout : 'fit',
	items : [{
	xtype : 'cartesian',
	store : {
	fields : ['subject','score'],
	data : [{
	subject : '국어',
	score : 100
	},{
	subject : '영어',
	score : 46
	},{
	subject : '수학',
	score : 82
	},{
	subject : '과학',
	score : 55
	},{
	subject : '사회',
	score : 23
	}]
	},
	axes : [{
	//3d add
	type : 'numeric3d',
	position : 'left',
	title : '(점)'
	},{
	//3d add
	type : 'category3d',
	poistion : 'bottom'
	}],
	series : {
	//3d add
	type : 'bar3d',
	xField : 'subject',
	yField : 'score'
	}
	}]
	})

view raw Sample2.js hosted with ❤ by GitHub

가로막대 그래프 단일데이터 예제

	Ext.create("Ext.panel.Panel",{
	width : 500,
	height : 500,
	renderTo : Ext.getBody(),
	layout : 'fit',
	items : [{
	xtype : 'cartesian',
	insetPadding: 40,
	//add config
	flipXY: true,
	store : {
	fields : ['subject','score'],
	data : [{
	subject : '국어',
	score : 100
	},{
	subject : '영어',
	score : 46
	},{
	subject : '수학',
	score : 82
	},{
	subject : '과학',
	score : 55
	},{
	subject : '사회',
	score : 23
	}]
	},
	axes: [{
	type: 'numeric',
	//change
	position: 'bottom',
	title : '(점)'
	}, {
	type: 'category',
	//change
	position: 'left'
	}],
	series: [{
	type: 'bar',
	xField: 'subject',
	yField: 'score'
	}]
	}]
	})

view raw Sample3.js hosted with ❤ by GitHub