korea map - options

3Overview

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

데이터, 데이터들의 표현 형식, 시계열 적용, Tool Tip 등의 설정을 합니다.

var defaultOptions = {
	data : {
		data : null,
		url: '',
		type: 'json',
		reverse: false,
		localOption : '',
		jsonDepth: 'output.result',
		use : ''
	},
	local : {
		step : null
	},
	toolTip : {
		use : {
			marker : false,
			local : false
		}
		className : null,
		position : {
			x : 0,
			y : 2
		},
		func : null
	},
	timeSlice : {
		use : false,
		delay : 500,		
		slider : null,
		play : null,
		pause : null,
		stop : null,
		data : function (data) {
		
		}
	},
	loadingBar : {
		use : false,
		select : ''
	},
	resize : {
		use : false,
		loadingBar : {
			use : false
		
		}
	}
}

Configuration Options

data

data.data

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

Parameters

datas

array

JSON DATA가 들어간 배열

Usage

var options = {
	data : {
		data : [
			{date: '20120101', locname: '강원', listshrs: 20},
			{date: '20120101', locname: '경기', listshrs: 50},
			{date: '20120101', locname: '경남', listshrs: 80},
			{date: '20120101', locname: '경북', listshrs: 110},
			{date: '20120101', locname: '광주', listshrs: 140},
			{date: '20120101', locname: '대구', listshrs: 170},
			{date: '20120101', locname: '대전', listshrs: 190},
			{date: '20120101', locname: '부산', listshrs: 220},
			{date: '20120101', locname: '서울', listshrs: 20},
			{date: '20120101', locname: '울산', listshrs: 50},
			{date: '20120101', locname: '인천', listshrs: 80},
			{date: '20120101', locname: '전남', listshrs: 100},
			{date: '20120101', locname: '전북', listshrs: 140},
			{date: '20120101', locname: '제주', listshrs: 170},
			{date: '20120101', locname: '충남', listshrs: 190},
			{date: '20120101', locname: '충북', listshrs: 220}                    
		]
	}  
}

data.url

Korea map 에 사용할 데이터 주소

Parameters

value

string

데이터 주소(AJAX로 호출)

Usage

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

data.type

Horizon chart 에 사용할 데이터 타입

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: [
			{date: '20120101', locname: '강원', listshrs: 20},
			{date: '20120101', locname: '경기', listshrs: 50},
			{date: '20120101', locname: '경남', listshrs: 80},
			{date: '20120101', locname: '경북', listshrs: 110},
			{date: '20120101', locname: '광주', listshrs: 140},
			{date: '20120101', locname: '대구', listshrs: 170},
			{date: '20120101', locname: '대전', listshrs: 190},
			{date: '20120101', locname: '부산', listshrs: 220},
			{date: '20120101', locname: '서울', listshrs: 20},
			{date: '20120101', locname: '울산', listshrs: 50},
			{date: '20120101', locname: '인천', listshrs: 80},
			{date: '20120101', locname: '전남', listshrs: 100},
			{date: '20120101', locname: '전북', listshrs: 140},
			{date: '20120101', locname: '제주', listshrs: 170},
			{date: '20120101', locname: '충남', listshrs: 190},
			{date: '20120101', locname: '충북', listshrs: 220}
		]
	}
}

data.localOption

Parameters

value

string

Data 에서 지역명의 정보를 선택

Usage

var options = {
	data: {
		localOption : 'locname'
	}
}

data.use

Parameters

value

string

Data 에서 Korea Map 의 지역별 색상에 관한 수치를 나타낼 데이터

Usage

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

local

local.step

데이터의 단계를 구분 짓는 배열

Parameters

value

array

데이터의 단계를 구분 짓는 배열

Usage

var options = {
	local: {
		step : [ 30, 60, 90, 120, 150, 180, 210 ]
	}
}

Demo

Publisher Go

toolTip

toolTip.use

툴팁의 사용 여부 결정

Parameters

			default	type	설명
toolTip	use	marker	'false'	boolean	marker 에 마우스 오버 시 툴팁의 사용 여부 ( 'true' or 'false' )
toolTip	use	local	'false'	boolean	local map 에 마우스 오버 시 툴팁의 사용 여부 ( 'true' or 'false' )

Usage

var options = {
	toolTip: {
		use: {
			marker : false,
			local : false
		}
	}
}

toolTip.className

툴팁의 class 명 지정

Parameters

value

string

툴팁의 class 명 지정

Usage

var options = {
	toolTip: {
		className: 'tip'
	}
}

toolTip.position

툴팁의 X,Y 좌표 설정

Parameters

value

object

툴팁의 X,Y 좌표 설정

Usage

var options = {
	toolTip: {
		position: {
			x : 20,
			y : 20	
		}
	}
}

toolTip.func

툴팁 관련 function

Parameters

tipfunction

function

출력 데이터 및 css 를 변경을 할 수 있음.

data	object	툴팁에 사용되는 data
tipElement	dom	툴팁으로 사용되는 DIV

Usage

var options = {
	toolTip: {
		func: function(data, tipElement){
			tip.html( '날짜 : ' + data.date + '<br/>데이터 : ' + data.listshrs);
			tip.css({color : 'gray'});
		}
	}
}

Demo

Publisher Go

timeSlice

timeSlice.use

시계열의 사용 여부 결정

Parameters

value

boolean

시계열의 사용 여부

Usage

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

Demo

Publisher Go

timeSlice.delay

시계열 재생시 그려지는 속도

Parameters

value

number

setTimeout 함수에 쓰여지는 interval과 동일(밀리초 단위)

timeSlice.slider

시계열 jQuery UI - Slider

Parameters

element

dom

Slider로 사용할 jQuery selector

timeSlice.play

시계열 재생버튼

Parameters

element

dom

재생버튼으로 사용할 jQuery selector

timeSlice.pause

시계열 일시정지버튼

Parameters

element

dom

일시정지버튼으로 사용할 jQuery selector

timeSlice.stop

시계열 정지버튼

Parameters

element

dom

정지버튼으로 사용할 jQuery selector

timeSlice.data

시계열 jQuery UI - slider 위치에 대한 데이터

Parameters

sliderfunction

function

차트에서 사용하는 슬라이더는 thumb가 2개이다.

thumb[0] 에서부터 thumb[1] 까지 사이의 데이터를 넘겨받는다.

Usage

var options = {
	timeSlice: {
		delay: 300,
		slider: $('#slider'),
		play: $('#playBtn'),
		pause: $('#pauseBtn'),
		stop: $('#stopBtn'),
		data: function(data){
			$('#info').text(data[0].date + '~' + data[data.length - 1].date);
		}
	}
}

Demo

Publisher Go

loadingBar

resize 이벤트 사용 여부 결정

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' )
resize	loading	use	'false'	boolean	리사이즈 이벤트 발생 시 로딩 바 사용 여부 ( 'true' or 'false' )

Usage

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

Demo

Publisher Go