ExtJS6 스물여섯번째강의 - ExtJS 6 원형 차트 만들기(ExtJS 6 Create Pie chart graph)

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

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

https://youtu.be/IBEcrYE0kgw

원형그래프

원형차트는 전체 데이터에 비례하는 데이터 조각을 보여줍니다.

범주 전체를 빠르고 간단하게 비교할 수 있는 뛰어난 기능입니다.

XY 축으로 이루어지지 않는 차트컴포넌트는 polar 컴포넌트를 이용

원형, 레이더, 계량기 관련 차트 컴포넌트를 이용할 경우에는 polar 차트를 이용합니다.

polar 컴포넌트에서 axes가 필요없는 차트는 ? 원형그래프

레이더 및 계량기 그래프 관련해서는 axes config 이용이 되는 반면, 원형차트는 축에대한 기준이 필요 없으므로 axes config를 사용하지 않아도 가능합니다.

기존 원형그래프에서 도넛모양으로 변경하고자 한다면?

series config에서 donut config를 백분율(%)값 으로 지정을 하면 됩니다.

3D 원형차트를 이용하고자 한다면?

series config의 type 속성의 value 값이 pie 로 되어있는 부분을 3D 막대그래프를 구현했던과 같이 pie3d 로 value 속성을 정의하면 됩니다.

cartesian 과 다르게 polar는 필드 정의가 다릅니다.

polar는 xField/yField config를 정의하지 않고, angleField 라는 필드값을 정의합니다.

	Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
	width : 800,
	height : 500,
	renderTo : Ext.getBody(),
	layout : 'fit',
	items : [{
	xtype : 'polar',
	innerPadding : 50,
	store : {
	fields : ['title','time'],
	data : [{
	title : 'ExtJS 6 로 만들어본 WebOS',
	time : 623
	},{
	title : 'ExtJS 6 란? ',
	time : 584
	},{
	title : 'ExtJS 6 문법 및 레이아웃 이해(1)',
	time : 582
	},{
	title : 'ExtJS 6 GPL 다운로드 및 환경설정',
	time : 510
	},{
	title : 'ExtJS 6 테마변경 및 onLoad 이해',
	time : 493
	},{
	title : '기타',
	time : 5106
	}]
	},
	series : {
	type : 'pie',
	donut : 30,
	label : {
	field : 'title'
	},
	highlight : {
	margin : 40
	},
	tooltip : {
	trackMouse : true,
	renderer : function(tooltip,record){
	tooltip.setHtml(record.get("title")+"<br/>지속시간:"+record.get("time"));
	}
	},
	angleField : 'time'
	}
	}]
	})
	});

view raw Sample1.js hosted with ❤ by GitHub