tree map - options

3Overview

TREE MAP 의 전반적인 설정에 대한 값을 정의 하는 곳으로

데이터, 데이터들의 표현 형식, mousemove 이벤트 등의 설정을 합니다.

var defaultOptions = {
	data : {
		data : null,
		url: '',
		type: 'json',
		jsonDepth: 'output.result',
		use : '',
		flag : '',
		group : '',
		groupName : '',
		item : ''
	},
	mousemove: function (data) {

	},
	loadingBar : {
		use : false,
		select : ''
	},
	resize : {
		use : false
	}
}

Configuration Options

data

data.data

URL이 아닌 JSON 데이터가 바로 입력될 경우에 사용

Parameters

datas

array

JSON DATA가 들어간 배열

Usage

var options = {
	data : {
		data : [
			{"name":"한국" ,"code":"001" ,"group":"아시아" ,"flag":"1" ,"vol":"250000"},
			{"name":"일본" ,"code":"001" ,"group":"아시아" ,"flag":"2" ,"vol":"180000"},
			{"name":"중국" ,"code":"001" ,"group":"아시아" ,"flag":"3" ,"vol":"150000"},
			{"name":"북한" ,"code":"001" ,"group":"아시아" ,"flag":"4" ,"vol":"100000"},
			{"name":"태국" ,"code":"001" ,"group":"아시아" ,"flag":"5" ,"vol":"60000"},
			{"name":"북한" ,"code":"001", "group":"아시아", "flag":"6" ,"vol":"30000"},
			{"name":"네팔" ,"code":"001" ,"group":"아시아" ,"flag":"7" ,"vol":"20000"},
			{"name":"몽골" ,"code":"001" ,"group":"아시아" ,"flag":"1" ,"vol":"10000"},
			{"name":"프랑스" ,"code":"002" ,"group":"유럽" ,"flag":"2" ,"vol":"240000"},
			{"name":"덴마크" ,"code":"002" ,"group":"유럽" ,"flag":"3" ,"vol":"200000"},
			{"name":"모나코" ,"code":"002" ,"group":"유럽" ,"flag":"4" ,"vol":"150000"},
			{"name":"벨기에" ,"code":"002" ,"group":"유럽" ,"flag":"5" ,"vol":"120000"},
			{"name":"스웨덴" ,"code":"002" ,"group":"유럽" ,"flag":"6" ,"vol":"90000"},
			{"name":"스위스" ,"code":"002" ,"group":"유럽", "flag":"7" ,"vol":"40000"},
			{"name":"폴란드" ,"code":"002" ,"group":"유럽" ,"flag":"1" ,"vol":"30000"},
			{"name":"헝가리" ,"code":"002" ,"group":"유럽" ,"flag":"1" ,"vol":"20000"}
		]
	}  
}

data.url

Tree map 에 사용할 데이터 주소

Parameters

value

string

데이터 주소(AJAX로 호출)

Usage

var options = {
	data: {
		url: 'http://www.cyber-i.com/'
	}
}

data.type

Tree map 에 사용할 데이터 타입

Parameters

value

string

데이터 타입 ["json", "text"]

Usage

var options = {
	data: {
		type: 'json'
	}
}

data.reverse

Parameters

value

boolean

데이터의 정렬이 내림차순이 아닌 오름차순으로 들어올 경우 사용 [false, true]

Usage

var options = {
	data: {
		reverse: false
	}
}

data.jsonDepth

json 데이터에 깊이가 있는 경우

Parameters

value

string

실제 데이터가 있는 곳까지 '.' 로 연결

Usage

var options = {
	data: {
		jsonDepth: 'output.result'
	}
}

// DATA RESULT
{
	output: {
		result: [
			data : [
				{"name":"한국" ,"code":"001" ,"group":"아시아" ,"flag":"1" ,"vol":"250000"},
				{"name":"일본" ,"code":"001" ,"group":"아시아" ,"flag":"2" ,"vol":"180000"},
				{"name":"중국" ,"code":"001" ,"group":"아시아" ,"flag":"3" ,"vol":"150000"},
				{"name":"북한" ,"code":"001" ,"group":"아시아" ,"flag":"4" ,"vol":"100000"},
				{"name":"태국" ,"code":"001" ,"group":"아시아" ,"flag":"5" ,"vol":"60000"},
				{"name":"북한" ,"code":"001", "group":"아시아", "flag":"6" ,"vol":"30000"},
				{"name":"네팔" ,"code":"001" ,"group":"아시아" ,"flag":"7" ,"vol":"20000"},
				{"name":"몽골" ,"code":"001" ,"group":"아시아" ,"flag":"1" ,"vol":"10000"},
				{"name":"프랑스" ,"code":"002" ,"group":"유럽" ,"flag":"2" ,"vol":"240000"},
				{"name":"덴마크" ,"code":"002" ,"group":"유럽" ,"flag":"3" ,"vol":"200000"},
				{"name":"모나코" ,"code":"002" ,"group":"유럽" ,"flag":"4" ,"vol":"150000"},
				{"name":"벨기에" ,"code":"002" ,"group":"유럽" ,"flag":"5" ,"vol":"120000"},
				{"name":"스웨덴" ,"code":"002" ,"group":"유럽" ,"flag":"6" ,"vol":"90000"},
				{"name":"스위스" ,"code":"002" ,"group":"유럽", "flag":"7" ,"vol":"40000"},
				{"name":"폴란드" ,"code":"002" ,"group":"유럽" ,"flag":"1" ,"vol":"30000"},
				{"name":"헝가리" ,"code":"002" ,"group":"유럽" ,"flag":"1" ,"vol":"20000"}
			]
		]
	}
}

data.use

Parameters

value

string

Data 에서 Tree Map 아이템의 크기를 나타내는 수치

Usage

var options = {
	data: {
		use : 'vol'
	}
}

data.flag

Parameters

value

string

Tree Map 아이템의 색상을 나타내는 데이터

Usage

var options = {
	data: {
		flag : 'flag'
	}
}

data.group

Parameters

value

string

Tree Map 아이템을 그룹화 하는 데이터

Usage

var options = {
	data: {
		group : 'code'
	}
}

data.groupName

Parameters

value

string

Tree Map 아이템 그룹의 이름

Usage

var options = {
	data: {
		groupName : 'group'
	}
}

data.item

Parameters

value

string

Tree Map 의 아이템을 나타내는 데이터

Usage

var options = {
	data: {
		item: 'name'
	}
}

mousemove

Tree map 에 마우스 오버 시

Parameters

mousemove

function

데이터

Tree map 에 마우스 오버 시 해당 데이터를 넘겨받는다.

Usage

var options = {
	mousemove: function(data){
		console.log(data)
	}
}

Demo

Publisher Go

loadingBar

Tree map 이 로드되는 사이에 보여지는 loading bar

Parameters

		default	type	설명
loadingBar	use	'false'	boolean	로딩 바 사용 여부 ( 'true' or 'false' )
loadingBar	select	' '	string	로딩 바 div 선택자 ( $('.loading') )

Usage

var options = {
	loadingBar: {
		use : true,
		select : $('.loading') 
	}
}

Demo

Publisher Go

resize

resize 이벤트

Parameters

		default	type	설명
resize	use	'false'	boolean	리사이즈 이벤트 사용 여부 ( 'true' or 'false' )

Usage

var options = {
	resize: {
		use : true
	}
}

Demo

Publisher Go