var defaultStyles = {
	layout : {
		position : {
			x : 0,
			y : 0
		},
		area : {
			color : '#f8f8f8'
		},
		line : {
			color : '#eaeaea',
			width : 1
		}
	},
	pie : {
		radius : 70,
		area : {
			color : [
				'#28a9a5', '#3db4af', '#5bc4c0', '#82d2cf', 
				'#ace1df', '#c8ebea', '#d9f1f0'
			]
		},
		line : {
			color : '#fff',
			width : 3
		},
		animate : {
			use : true,
			step : 80,
			type : 'easeInOutExpo' /* linear | easeInOutExpo | none */
		},
		hover : {
			use : true,
			area : {
				color : '#138b87'
			}
		}
	},
	base : {
		use : false,
		radius : 80,
		area : {
			color : '#fff'
		},
		line : {
			color : '#fff',
			width : 1
		}
	},
	donut : {
		use : false,
		radius : 30,
		area : {
			color : '#fff'
		},
		line : {	
			color : '#fff',
			width : 1
		}
	},   
	legend : {
		use : true,
		stackedGap : 5,
		type : 'brokenLine',
		text: {
			family: 'Nanum Gothic',
			size: 12, 
			color: '#333333', 
			style: 'normal',    /* normal | italic */
			weight: 'bold',   /* normal | bold */
			opacity: 1
		},          
		pin : {
			color : '#8397a6',
			width : 1,
			length : 20,
			opacity : 1
		},
		pinHead : {
			color : '#8397a6',
			length : 20,
			width : 1,
			opacity : 1
		}            
	}
};

Configuration Styles

layout

Pie 의 레이아웃 스타일

Parameters

Usage

var styles = {
	layout: {
		position: {
			x : 50,
			y : 50	
		},
		area : {
			color : '#f8f8f8'
		},
		line : {
			color : '#eaeaea',
			width : 1
		}
	}
}

var styles = {
	pie: {
		radius: 70
	}
}

var styles = {
	pie: {
		area: {
			color : [
				'blue', 'purple', 'green', 'black', 'gray', 
				 'silver', 'yellow', 'navy', 'red', 'gold'
			]	
		}
	}
}

[ {src : 'pattern1.png'},
  {src : 'pattern2.png'},
  {src : 'pattern3.png'},
  {src : 'pattern4.png'} ]

var styles = {
	pie: {
		area: {
			color : [
				{src : 'pattern1.png'},
				{src : 'pattern2.png'},
				{src : 'pattern3.png'},
				{src : 'pattern4.png'}
			]
		}
	}
}

var styles = {
	pie: {
		line: {
			color : '#ff0000',
			width : 2
		}
	}
}

var styles = {
	pie: {
		animate: {
			use : true,				/* 애니메이션 사용 여부 */
			step : 80,				/* 애니메이션 속도 */
			type : 'easeInOutExpo'	/* 애니메이션 type */
		}
	}
}

var styles = {
	pie: {
		hover: {
			use : true,				/* hover 사용 유무 [true or false] */
			area : {
				color : '#ff0000'	/* hover 사용시 area color 변경 */
			}
		}
	}
}

var styles = {
	base: {
		use : true,				/* base 사용 유무 [true or false] */
		radius : 15,
		area : {
			color : '#ff0000'
		},
		line : {
			color : '#fff',
			width : 1
		}
	}
}

var styles = {
	donut: {
		use : true,				/* donut사용 유무 [true or false] */
		radius : 30,
		area : {
			color : '#fff'
		},
		line : {
			color : '#fff',
			width : 1
		}
	}
}

var styles = {
	legend: {
		use : true				/* legend 사용 유무 [true or false] */
	}
}

var styles = {
	legend: {
		stackedGap : 7
	}
}

var styles = {
	legend: {
		type : 'brokenLine'			/* ['brokenLine' or 'lollipop' or 'insideLegend'] */
	}
}

var styles = {
	legend: {
		text : {
			family : 'dotum',
			size : 11, 
			color : '#000',
			style : 'normal',		/* [ normal or italic ] */
			weight : 'normal',		/* [ normal or bold ] */
			opacity : 1
		}
	}
}

var styles = {
	legend: {
		pin : {
			color : '#8397a6',
			width : 1,
			length : 20,
			opacity : 1
		}
	}
}

var styles = {
	legend: {
		pinHead : {				
			color : '#fff',			
			width : 1,
			length : 20,			/* tip.pinHead 길이 */
			opacity : 1
		}
	}
}

var styles = {
	legend: {		
		pinHead : {				
			size : 4,				/* size */
			area : {
				color : '#fff'
			},
			line : {
				color : '#455763',
				width : 4
			}
		}
	}
}