ExtJS6 스물다섯번째강의 - ExtJS 6 분산/분포 차트 만들기(ExtJS 6 Create Scatter chart graph)

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

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

https://youtu.be/FovgBmJqiD4

분산/분포 그래프

분산형 차트는 데이터를 점의 집합으로 표시하는데 유용한 그래프 컴포넌트입니다.

데이터들간의 상관관계를 찾는데 도움이 되며 여러 측정값을 표시하는데 적합한 차트입니다.

기존 차트와 다른점이 있다면? axes 모두 numeric!!

기본적으로 이전 강좌의 cartesian 관련 차트들은 axes config 속성이 category + numeric 의 조합으로 예를 들었습니다.

이번 분산차트의 경우는 xy 축의 값이 모두 numeric인 데이터를 표출하는데 유용한 차트입니다.

series config에서 label 속성을 이용하느냐, tooltip 속성을 이용하느냐!

데이터를 보기위해서는 두속성 모두를 사용해도 되지만, label 속성같은경우는, 포인트들이 밀집되어 있을 경우 라벨들이 겹쳐지는 현상이 발생되어 label 보다는 tooltip 속성을 이용하는것을 권해드리고 싶습니다.

툴팁 ▶ renderer >  setHtml function 사용법

renderer 1번째 parameter : 툴팁자기 자신의 텀포넌트를 가지고 있는 object

renderer 2번째 parameter : 데이터 스토어에 담겨있는 각각의 field/record 

툴팁객체.setHtml()을 할 경우, 일반적으로 툴팁 영역내에 HTML 양식으로 문구 및 기타 내용들을 표현할 수 있습니다.

jQuery 의 html() 함수와 유사하다고 생각하시면 됩니다.

분포차트 샘플코드

	Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
	width : 500,
	height : 500,
	renderTo : Ext.getBody(),
	layout : 'fit',
	items : [{
	xtype : 'cartesian',
	innerPadding : 50,
	store : {
	fields : ['title','count','time'],
	data : [{
	title : 'ExtJS 6 로 만들어본 WebOS',
	time : 623,
	count : 268
	},{
	title : 'ExtJS 6 란? ',
	time : 584,
	count : 124
	},{
	title : 'ExtJS 6 문법 및 레이아웃 이해(1)',
	time : 582,
	count : 65
	},{
	title : 'ExtJS 6 GPL 다운로드 및 환경설정',
	time : 510,
	count : 79
	},{
	title : 'ExtJS 6 테마변경 및 onLoad 이해',
	time : 493,
	count : 72
	},{
	title : 'ExtJS 6 버튼종류 알아보기',
	time : 478,
	count : 42
	},{
	title : 'ExtJS 6 API Document 보는법',
	time : 420,
	count : 43
	},{
	title : 'ExtJS 6 추가 레이아웃 알아보기',
	time : 345,
	count : 51
	},{
	title : 'ExtJS 6 추가 레이아웃 알아보기(2)',
	time : 336,
	count : 45
	},{
	title : 'ExtJS 6 메시지상자 다뤄보기',
	time : 311,
	count : 28
	},{
	title : 'ExtJS 6 그리드 등록,수정,삭제,조회 한방에 끝내기',
	time : 292,
	count : 53
	},{
	title : 'ExtJS 6 그리드 페이징 및 버퍼스토어 적용하기',
	time : 283,
	count : 68
	},{
	title : 'ExtJS 6 트리패널 + 트리스토어 알아보기',
	time : 254,
	count : 35
	},{
	title : 'ExtJS 6 폼필드 알아보기',
	time : 249,
	count : 40
	},{
	title : 'ExtJS 6 윈도우 컴포넌트 다뤄보기',
	time : 212,
	count : 28
	},{
	title : 'ExtJS 6 Ajax 클래스 사용법 이해',
	time : 197,
	count : 21
	},{
	title : 'ExtJS 6 그리드 에디팅 플러그인 적용하기',
	time : 191,
	count : 55
	},{
	title : 'ExtJS 6 그리드패널을 이용한 데이터스토어 이해',
	time : 191,
	count : 60
	},{
	title : 'ExtJS 6 툴바종류, 리스너, renderer 이해',
	time : 170,
	count : 34
	},{
	title : 'ExtJS 6 탭패널 알아보기',
	time : 72,
	count : 27
	}]
	},
	axes : [{
	type : 'numeric',
	position : 'bottom',
	fields : 'count',
	minimum : 0,
	maximum : 300,
	majorTickSteps : 10,
	grid : true
	},{
	type : 'numeric',
	position : 'left',
	fields : 'time',
	minimum : 0,
	maximum : 650,
	majorTickSteps : 10,
	grid : true
	}],
	series : {
	type : 'scatter',
	xField : 'count',
	yField : 'time',
	highlightCfg : {
	scale : 2
	},
	tooltip : {
	trackMouse : true,
	renderer : function(tooltip,record) {
	tooltip.setHtml(record.get("title")+"<br/>조회수:"+record.get("count")+"<br/>시청시간(분):"+record.get("time"));
	}
	}
	}
	}]
	})
	});

view raw Sample1.js hosted with ❤ by GitHub

버블차트 샘플코드

	Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
	width : 500,
	height : 500,
	renderTo : Ext.getBody(),
	layout : 'fit',
	items : [{
	xtype : 'cartesian',
	innerPadding : 50,
	store : {
	fields : ['title','count','time'],
	data : [{
	title : 'ExtJS 6 로 만들어본 WebOS',
	time : 623,
	count : 268
	},{
	title : 'ExtJS 6 란? ',
	time : 584,
	count : 124
	},{
	title : 'ExtJS 6 문법 및 레이아웃 이해(1)',
	time : 582,
	count : 65
	},{
	title : 'ExtJS 6 GPL 다운로드 및 환경설정',
	time : 510,
	count : 79
	},{
	title : 'ExtJS 6 테마변경 및 onLoad 이해',
	time : 493,
	count : 72
	},{
	title : 'ExtJS 6 버튼종류 알아보기',
	time : 478,
	count : 42
	},{
	title : 'ExtJS 6 API Document 보는법',
	time : 420,
	count : 43
	},{
	title : 'ExtJS 6 추가 레이아웃 알아보기',
	time : 345,
	count : 51
	},{
	title : 'ExtJS 6 추가 레이아웃 알아보기(2)',
	time : 336,
	count : 45
	},{
	title : 'ExtJS 6 메시지상자 다뤄보기',
	time : 311,
	count : 28
	},{
	title : 'ExtJS 6 그리드 등록,수정,삭제,조회 한방에 끝내기',
	time : 292,
	count : 53
	},{
	title : 'ExtJS 6 그리드 페이징 및 버퍼스토어 적용하기',
	time : 283,
	count : 68
	},{
	title : 'ExtJS 6 트리패널 + 트리스토어 알아보기',
	time : 254,
	count : 35
	},{
	title : 'ExtJS 6 폼필드 알아보기',
	time : 249,
	count : 40
	},{
	title : 'ExtJS 6 윈도우 컴포넌트 다뤄보기',
	time : 212,
	count : 28
	},{
	title : 'ExtJS 6 Ajax 클래스 사용법 이해',
	time : 197,
	count : 21
	},{
	title : 'ExtJS 6 그리드 에디팅 플러그인 적용하기',
	time : 191,
	count : 55
	},{
	title : 'ExtJS 6 그리드패널을 이용한 데이터스토어 이해',
	time : 191,
	count : 60
	},{
	title : 'ExtJS 6 툴바종류, 리스너, renderer 이해',
	time : 170,
	count : 34
	},{
	title : 'ExtJS 6 탭패널 알아보기',
	time : 72,
	count : 27
	}]
	},
	axes : [{
	type : 'numeric',
	position : 'bottom',
	fields : 'count',
	minimum : 0,
	maximum : 300,
	majorTickSteps : 10,
	grid : true
	},{
	type : 'numeric',
	position : 'left',
	fields : 'time',
	minimum : 0,
	maximum : 650,
	majorTickSteps : 10,
	grid : true
	}],
	series : {
	type : 'scatter',
	xField : 'count',
	yField : 'time',
	highlightCfg : {
	scale : 1.3
	},
	tooltip : {
	trackMouse : true,
	renderer : function(tooltip,record) {
	tooltip.setHtml(record.get("title")+"<br/>조회수:"+record.get("count")+"<br/>시청시간(분):"+record.get("time"));
	}
	},
	style: {
	renderer: function (sprite, config, rendererData, index) {
	var store = rendererData.store,
	storeItem = store.getData().items[index];
	config.radius = interpolate(storeItem.data.time, 0, 1000, 5, 30);
	config.fillOpacity = interpolate(storeItem.data.time, 0, 1000, 1, 0.7);
	config.fill = interpolateColor(storeItem.data.time, 0, 1000);
	config.stroke = config.fill;
	config.lineWidth = 3;
	}
	}
	}
	}]
	})
	});
	function interpolate(lambda, minSrc, maxSrc, minDst, maxDst) {
	return minDst + (maxDst - minDst) * Math.max(0, Math.min(1, (lambda - minSrc) / (maxSrc - minSrc)));
	}
	function interpolateColor(lambda, minSrc, maxSrc) {
	return Ext.draw.Color.fly(0, 0, 0, 0).setHSL(
	interpolate(lambda, minSrc, maxSrc, Ext.draw.Color.fly('blue').getHSL()[0], Ext.draw.Color.fly('red').getHSL()[0]),
	interpolate(lambda, minSrc, maxSrc, Ext.draw.Color.fly('blue').getHSL()[1], Ext.draw.Color.fly('red').getHSL()[1]),
	interpolate(lambda, minSrc, maxSrc, 0.3, Ext.draw.Color.fly('red').getHSL()[2])
	).toString();
	}

view raw Sample2.js hosted with ❤ by GitHub