radar - styles

3Overview

Radar 의 전반적인 스타일에 대한 값을 정의

var styles = {
	layout : {
	    position : {
	        x : 0,
	        y : 0
	    },
	    area : {
	        color : '#f8f8f8'
	    }
	},
	radar : {
	    radius : 60,
	    maxValue:100,
	    area : {
	        color: 'rgb(204, 121, 167)',
	    },
	    line : {
	        color : 'red',
	        width : 0.2
	    },
	    animate : {
	        use : true,
	        step : 70,
	        type : 'linear' /* linear | easeInOutExpo | none */
	    },
	    hover : {
	        use : true,
	        area : {
	            color : {
	                src : '../img/pattern_hover.png'
	            }
	        }
	    }
	},
	series :[
	    {s1 : {
	        use : true,
	        line: {
	            color: '#f6557b',
	            width: 2,
	            opacity: 1
	        },
	        area : {
	            color : '#f6557b',
	            opacity: 0.5
	        },
	        tick: {
	            style: 'circle',
	            size: 5,
	            overSize: 1.5,
	            area: {
	                color: '#f6557b',
	                opacity: 1
	            },
	            line: {
	                color: '#f6557b',
	                width: 1,
	                opacity:1
	            }
	        }
	    }},
	    {s2 : {
	        use : true,
	        line: {
	            color: 'black',
	            width: 1,
	            opacity: 1
	        },
	        tick: {
	            style: 'circle',
	            size: 5,
	            overSize: 1.5,
	            area: {
	                color: 'blue',
	                opacity: 1
	            },
	            line: {
	                color: 'blue',
	                width: 1,
	                opacity:
	                    1
	            }
	        },
	        area : {
	            color : 'blue',
	            opacity: 0.5
	        }
	    }
	}
	],
	legend : {
	    use : true,
	    text: {
	        family: 'Nanum Gothic',
	        size: 12,
	        color: '#333333',
	        style: 'normal',    /* normal | italic */
	        weight: 'bold',   /* normal | bold */
	        opacity: 1
	    }
	},
	innerLegend : {
	    use : true,
	    text: {
	        family: 'Nanum Gothic',
	        size: 10,
	        color: '#333333',
	        style: 'normal',    /* normal | italic */
	        weight: 'bold',   /* normal | bold */
	        opacity: 1
	    }
	}
};

Configuration Styles

layout

radar 의 레이아웃 스타일

Parameters

			default	type	설명
layout	position	x	0	number	radar 의 X 축 위치, SVG Element 의 중앙 ( 0 ) 을 기준으로 좌, 우 위치 값
		y	0	number	radar 의 Y 축 위치, SVG Element 의 중앙 ( 0 ) 을 기준으로 상, 하 위치 값
	area	color	'#f8f8f8'	string	SVG 전체 영역의 배경 색상
	line	color	'#eaeaea'	string	SVG 전체 영역의 테두리 색상
	line	width	1	number	SVG 전체 영역의 테두리 두께

Usage

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

Demo

Publisher Go

radar

radar.radius

radar의 반지름 값 설정

parameters

		default	type	설명
radar	radius	70	number	SVG element 의 높이와 넓이 중 작은 값을 기준으로 한 퍼센트 값으로 파이의 지름에 적용 된다.( 0 ~ ) radar.radius 가 70 일때, SVG element 의 넓이가 200px 이고 높이가 100px 이라면 파이의 지름은 100px 의 70% 인 70px 이 적용된다.

default

type

설명

radar

radius

number

SVG element 의 높이와 넓이 중 작은 값을 기준으로 한 퍼센트 값으로 파이의 지름에 적용 된다.( 0 ~ )

radar.radius 가 70 일때, SVG element 의 넓이가 200px 이고 높이가 100px 이라면 파이의 지름은 100px 의 70% 인 70px 이 적용된다.

Usage

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

Demo

Publisher Go

radar.maxValue

radar의 반지름 값 설정

parameters

		default	type	설명
radar	maxValue	100	number	radar 차트에 표시될 최댓값.

Usage

var styles = {
	radar: {
		maxValue: 70
	}
}

Demo

Publisher Go

radar.area

radar의 area 영역에 대한 스타일 정의

parameters

			default	type	설명
radar	area	color	'#eeeeee'	array	radar의 면의 색상 ( 단색 일 경우, 영문컬러명이나 RGB값 입력 )

Usage

var styles = {
	radar: {
		area: {
			color :'#eeeeee'
		}
	}
}

Demo

Publisher Go

parameters

			value	type	설명
radar	area	color	{src : 'pattern1.png'}	array	radar의 면의 색상 ( pattern 이미지를 사용 할 경우 )

Usage

var styles = {
	radar: {
		area: {
			color : [
				{src : 'pattern1.png'},
			]
		}
	}
}

Demo

Publisher Go

radar.line

radar의 line 에 대한 스타일 정의

		default	type	설명
line	color	'#fff'	string	radar의 선 색상 (영문컬러명이나 RGB값 입력)
line	width	3	string	radar의 선 두께 (0 ~ )

Usage

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

Demo

Publisher Go

radar.animate

radar의 애니메이션 스타일

parameters

			default	type	설명
radar	animate	use	true	boolean	radar의 애니메이션 사용 여부 ( 'true' or 'false' )
		step	80	number	radar의 애니메이션 속도 ( 숫자가 작을수록 애니메이션 진행 속도가 빠름 )
		type	'linear'	string	radar의 애니메이션 타입

Usage

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

Demo

Publisher Go

radar.hover

radarhover 이벤트

parameters

				default	type	설명
radar	hover	use		true	boolean	radar mouse over 시 Hover 이벤트 사용 여부 ( 'true' or 'false' )
radar	hover	area	color	'#138b87'	string	mouse over 시 radar의 해당 영역 색상 (영문컬러명이나 RGB값 입력)

Usage

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

Demo

Publisher Go

series

radar 차트의 시리즈별로 스타일을 지정

parameters

			default	type	설명
series	use		'false'	boolean	series 사용 여부 ( 'true' or 'false' )
	tick	style	'circle'	String	serise의 tick style (‘diamond’,’triangle’,’rect’,’circle’,’star’)
		size	5	number	series의 tick의 size
		area		string	series의 tick의 스타일
		line		string	series의 tick의 테두리 스타일
	area	color	'#fff'	string	Base 영역의 색상 ( 영문컬러명이나 RGB값 입력 )
	line	color	'#fff'	string	Base 의 선 색상 ( 영문컬러명이나 RGB값 입력 )
	line	width	1	number	Base 의 선 두께 ( 0 ~ )

Usage

var styles = {
	series: [
	{
	    s1: {
	        use: true,
	        line: {
	            color: '#f6557b',
	            width: 1,
	            opacity: 1
	        },
	        area: {
	            color: '#f6557b',
	            opacity: 0.5
	        },
	        tick: {
	            style: 'circle',
	            size: 5,
	            overSize: 1.5,
	            area: {
	                color: '#f6557b',
	                opacity: 1
	            },
	            line: {
	                color: '#f6557b',
	                width: 1,
	                opacity: 1
	            }
	        }
	    }
	},
	{
	    s2: {
	        use: true,
	        line: {
	            color: 'black',
	            width: 1,
	            opacity: 1
	        },
	        tick: {
	            style: 'circle',
	            size: 5,
	            overSize: 1.5,
	            area: {
	                color: 'blue',
	                opacity: 1
	            },
	            line: {
	                color: 'blue',
	                width: 1,
	                opacity:
	                    1
	            }
	        },
	        area: {
	            color: 'blue',
	            opacity: 0.5
	        }
	    }
	}
	]
}

Demo

Publisher Go

legend

radar의 legend 설정

parameters

			default	type	설명
legend	use		true	boolean	legend의 사용유무
	text	family	'NanumGothic’	string	항목명 글꼴
		size	10	number	항목명 글꼴의 크기
		color	'#fff'	string	항목명 글꼴의 색상 ( 영문컬러명이나 RGB값 입력 )
		weight	‘bold’	number	항목명 글꼴의 두께
		style	'normal’	string	항목명 글꼴의 기울기
		opacity	1	number	항목명 글꼴의 투명도

Usage

var styles = {
	innerLegend: {
    use: true,
    text: {
        family: 'Nanum Gothic',
        size: 10,
        color: '#333333',
        style: 'normal', /* normal | italic */
        weight: 'bold', /* normal | bold */
        opacity: 1
    }
}
}

Demo

Publisher Go

innerLegend

radar 의 차트 내부 legend 스타일

parameters

			default	type	설명
innerLegend	use		true	boolean	radar의 inner legend 사용 여부 ( 'true' or 'false' )
	text	family	'NanumGothic’	string	차트내부 글꼴
		color	'#fff'	string	차트 내부 글꼴의 색상 ( 영문컬러명이나 RGB값 입력 )
		weight	‘bold’	number	차트 내부 글꼴의 두께
		style	'normal’	string	차트 내부 글꼴의 기울기
		opacity	1	number	차트 내부 글꼴의 투명도
		opacity	1	number	항목명 글꼴의 투명도

Usage

var styles = {
	innerLegend: {
    use: true,
    text: {
        family: 'Nanum Gothic',
        size: 10,
        color: '#333333',
        style: 'normal', /* normal | italic */
        weight: 'bold', /* normal | bold */
        opacity: 1
    }
}
}

Demo

Publisher Go