pie - options

3Overview

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

데이터, 데이터들의 표현 형식, 시계열 적용, Tool Tip, Legend, 설정들의 사용유무를 설정한다.

var defaultOptions = {
	data : {
		data : null,
		url: null,
		type: null,
		reverse: false,
		jsonDepth: 'output.result',
		use : null
	},
	legend : {
		format : null,
		func : null
	},
	toolTip : {
		use : true,           	
		position : {
			x : 0,
			y : 0
		},            
		func : null
	},
	timeSlice : {
		use : false,
		delay : 300,
		animate : {
			type : 'linear', /* linear | > | < | <> | bounce | elastic | backln | backOut | none */
			speed : 150
		},
		slider : null,
		play : null,
		pause : null,
		stop : null,
		data : null
	}, 
	resize : {
		use : false,
		func : null
	}
}

Configuration Options

data

data.data

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

Parameters

datas

array

JSON DATA가 들어간 배열

Usage

var options = {
	data: {
		data: [
			{date: 20120101, price: 10000, legend: 'A'},
			{date: 20120101, price: 20000, legend: 'B'},
			{date: 20120101, price: 30000, legend: 'C'},
			{date: 20120101, price: 40000, legend: 'D'}
		]
	}
}

data.url

Pie 에 사용할 데이터 주소

Parameters

value

string

데이터 주소(AJAX로 호출)

Usage

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

data.type

Pie 에 사용할 데이터 타입

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, price: 10000, legend: 'A'},
			{date: 20120101, price: 20000, legend: 'B'},
			{date: 20120101, price: 30000, legend: 'C'},
			{date: 20120101, price: 40000, legend: 'D'}
		]
	}
}

data.use

Parameters

value

string

Pie 의 수치를 결정하는 값

Usage

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

legend

legend.format

legend 텍스트 Formatting

Parameters

formatter

function

X축 데이터 출력 형식 정의

value

array

legend 에 출력될 텍스트

Returns

value

array

출력 형식이 적용된 텍스트

Usage

var options = {
	legend: {
		format: ['가','나','다','라'] 
	}
}

Demo

Publisher Go

legend.func

legend 텍스트 Formatting

Parameters

formatter

function

Y축 데이터 출력 형식 정의

value

object

data 중에서 legend 에 출력 될 값을 선택 및 변경

Returns

value

string

출력 형식이 적용된 텍스트

Usage

var options = {
	legend: {
		func: function(pie){
			
			var legend = [];
            var dataTotalValue = pie.settings.data.dataTotalValue;
            var data = pie.settings.data.renderedData;
                
            for (var i = 0; i < data.length; i++) {
                var per = Math.round(100 / dataTotalValue * data[i].price);
                
                legend.push(per + '%');
            }
                  
            return legend;
		}
	}
}

Demo

Publisher Go

toolTip

toolTip.use

툴팁의 사용 여부 결정

Parameters

value

boolean

툴팁의 사용 여부

Usage

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

Demo

Publisher Go

toolTip.position

툴팁의 X,Y 좌표 설정

Parameters

value

object

툴팁의 X,Y 좌표 설정

Usage

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

Demo

Publisher Go

toolTip.func

툴팁 관련 function

Parameters

tipfunction

function

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

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

Usage

var options = {
	toolTip: {
		func: function(pie, data, tipElement){
			tip.html( '날짜 : ' + data.date + '<br/>금액 : ' + data.price );
			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.animate.type

시계열의 animate type

Parameters

value

string

“linear”
“<” or “easeIn” or “ease-in”
“>” or “easeOut” or “ease-out”
“<>” or “easeInOut” or “ease-in-out”
“backIn” or “back-in”
“backOut” or “back-out”
“elastic”
“bounce”

Usage

var options = {
	timeSlice: {
		animate: {
			type: 'linear' 
		} 
	}
}

Demo

Publisher Go

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

resize

resize.use

resize 이벤트 사용 여부 결정

Parameters

value

boolean

resize 이벤트사용 여부 결정

Pie 포함하는 DIV 의 width 값이 100% 로 지정 되었을 경우 사용 가능

Usage

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

Demo

Publisher Go