PIE 의 전반적인 스타일에 대한 값을 정의
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 } } };
Pie 의 레이아웃 스타일
default | type | 설명 | |||
---|---|---|---|---|---|
layout | position | x | 0 | number | pie 의 X 축 위치, SVG Element 의 중앙 ( 0 ) 을 기준으로 좌, 우 위치 값 |
y | 0 | number | pie 의 Y 축 위치, SVG Element 의 중앙 ( 0 ) 을 기준으로 상, 하 위치 값 | ||
area | color | '#f8f8f8' | string | SVG 전체 영역의 배경 색상 | |
line | color | '#eaeaea' | string | SVG 전체 영역의 테두리 색상 | |
width | 1 | number | SVG 전체 영역의 테두리 두께 |
var styles = { layout: { position: { x : 50, y : 50 }, area : { color : '#f8f8f8' }, line : { color : '#eaeaea', width : 1 } } }
Pie 의 반지름 값 설정
default | type | 설명 | ||
---|---|---|---|---|
pie | radius | 70 | number | SVG element 의 높이와 넓이 중 작은 값을 기준으로 한 퍼센트 값으로 파이의 지름에 적용 된다.( 0 ~ )
|
var styles = { pie: { radius: 70 } }
Pie 의 area 영역에 대한 스타일 정의
default | type | 설명 | |||
---|---|---|---|---|---|
pie | area | color | ['#28a9a5', '#3db4af', '#5bc4c0', '#82d2cf', '#ace1df', '#c8ebea', '#d9f1f0'] | array | PIE 의 면의 색상 ( 단색 일 경우, 영문컬러명이나 RGB값 입력 ) |
var styles = { pie: { area: { color : [ 'blue', 'purple', 'green', 'black', 'gray', 'silver', 'yellow', 'navy', 'red', 'gold' ] } } }
value | type | 설명 | |||
---|---|---|---|---|---|
pie | area | color | [ {src : 'pattern1.png'}, {src : 'pattern2.png'}, {src : 'pattern3.png'}, {src : 'pattern4.png'} ] | array | PIE 의 면의 색상 ( pattern 이미지를 사용 할 경우 ) |
var styles = { pie: { area: { color : [ {src : 'pattern1.png'}, {src : 'pattern2.png'}, {src : 'pattern3.png'}, {src : 'pattern4.png'} ] } } }
Pie 의 line 에 대한 스타일 정의
default | type | 설명 | ||
---|---|---|---|---|
line | color | '#fff' | string | PIE 의 선 색상 (영문컬러명이나 RGB값 입력) |
width | 3 | string | PIE 의 선 두께 (0 ~ ) |
var styles = { pie: { line: { color : '#ff0000', width : 2 } } }
Pie 의 애니메이션 스타일
default | type | 설명 | |||
---|---|---|---|---|---|
pie | animate | use | true | boolean | PIE 의 애니메이션 사용 여부 ( 'true' or 'false' ) |
step | 80 | number | PIE 의 애니메이션 속도 ( 숫자가 작을수록 애니메이션 진행 속도가 빠름 ) | ||
type | 'easeInOutExpo' | string | PIE 의 애니메이션 타입 ( 'linear' or 'easeInOutExpo' ) |
var styles = { pie: { animate: { use : true, /* 애니메이션 사용 여부 */ step : 80, /* 애니메이션 속도 */ type : 'easeInOutExpo' /* 애니메이션 type */ } } }
pie hover 이벤트
default | type | 설명 | ||||
---|---|---|---|---|---|---|
pie | hover | use | true | boolean | PIE mouse over 시 Hover 이벤트 사용 여부 ( 'true' or 'false' ) | |
area | color | '#138b87' | string | mouse over 시 PIE 의 해당 영역 색상 (영문컬러명이나 RGB값 입력) |
var styles = { pie: { hover: { use : true, /* hover 사용 유무 [true or false] */ area : { color : '#ff0000' /* hover 사용시 area color 변경 */ } } } }
pie 를 둘러싸는 원형 모양의 base 스타일
default | type | 설명 | |||
---|---|---|---|---|---|
base | use | 'false' | boolean | Base 사용 여부 ( 'true' or 'false' ) | |
radius | 80 | number | SVG element 의 높이와 넓이 중 작은 값을 기준으로 한 퍼센트 값으로 베이스의 지름에 적용 된다. ( 0 ~ )
| ||
area | color | '#fff' | string | Base 영역의 색상 ( 영문컬러명이나 RGB값 입력 ) | |
line | color | '#fff' | string | Base 의 선 색상 ( 영문컬러명이나 RGB값 입력 ) | |
width | 1 | number | Base 의 선 두께 ( 0 ~ ) |
var styles = { base: { use : true, /* base 사용 유무 [true or false] */ radius : 15, area : { color : '#ff0000' }, line : { color : '#fff', width : 1 } } }
Donut 형태의 PIE 설정
default | type | 설명 | |||
---|---|---|---|---|---|
donut | use | 'false' | boolean | Donut 사용 여부 ( 'true' or 'false' ) | |
radius | 30 | number | SVG element 의 높이와 넓이 중 작은 값을 기준으로 한 퍼센트 값으로 도넛의 지름에 적용 된다. ( 0 ~ )
| ||
area | color | '#fff' | string | Donut 영역의 색상 ( 영문컬러명이나 RGB값 입력 ) | |
line | color | '#fff' | string | Donut 의 선 색상 ( 영문컬러명이나 RGB값 입력 ) | |
width | 1 | number | Donut 의 선 두께 ( 0 ~ ) |
var styles = { donut: { use : true, /* donut사용 유무 [true or false] */ radius : 30, area : { color : '#fff' }, line : { color : '#fff', width : 1 } } }
PIE 의 legend styles
legend 사용 여부
default | type | 설명 | ||
---|---|---|---|---|
legend | use | true | boolean | PIE 의 legend 사용 여부 ( 'true' or 'false' ) |
var styles = { legend: { use : true /* legend 사용 유무 [true or false] */ } }
pie 의 legend 들이 서로 겹칠 경우 겹치지 않도록 설정
default | type | 설명 | ||
---|---|---|---|---|
legend | stackedGap | 5 | number | Pie 의 Legend 가 겹칠 경우 겹친 부분의 간격을 지정한 간격 만큼 넓히도록 설정 |
var styles = { legend: { stackedGap : 7 } }
legend 의 타입 ('brokenLine' or 'lollipop' or 'insideLegend')
default | type | 설명 | ||
---|---|---|---|---|
legend | type | 'brokenLine' | string | legend 의 타입 |
var styles = { legend: { type : 'brokenLine' /* ['brokenLine' or 'lollipop' or 'insideLegend'] */ } }
legend 의 text 영역
default | type | 설명 | |||
---|---|---|---|---|---|
legend | text | family | 'Nanum Gothic' | string | 글꼴 종류 이름 ( 영문명 ) |
size | 12 | number | 글꼴 크기 ( px 단위 ) | ||
color | '#333333' | string | 글꼴 색상 ( 영문 색상명 혹은 RGB값 ) | ||
style | 'normal' | string | 글꼴 모양 ( 'normal' or 'italic') | ||
weight | 'bold' | string | 글꼴 두께 ( 'normal' or 'bold' ) | ||
opacity | 1 | number | 글꼴 투명도 ( 0 ~ 1 ) |
var styles = { legend: { text : { family : 'dotum', size : 11, color : '#000', style : 'normal', /* [ normal or italic ] */ weight : 'normal', /* [ normal or bold ] */ opacity : 1 } } }
pie 와 legend 사이의 연결 선
default | type | 설명 | |||
---|---|---|---|---|---|
legend | pin | color | '#8397a6' | string | PIE Legend 의 기본 pin 의 선 색상 ( 영문 색상명 혹은 RGB값 ) |
width | 1 | number | PIE Legend 의 기본 pin 의 선 두께 ( 0 ~ ) | ||
length | 20 | number | PIE Legend 의 기본 pin 길이 ( 0 ~ ) | ||
opacity | 1 | number | PIE Legend 의 기본 pin 의 선 투명도 ( 0 ~ 1 ) |
var styles = { legend: { pin : { color : '#8397a6', width : 1, length : 20, opacity : 1 } } }
legend.tip.pin 의 확장으로 꺽은 선 형태의 pinHead 스타일
default | type | 설명 | |||
---|---|---|---|---|---|
legend | pinHead | color | '#8397a6' | string | brokenLine 의 pinHead 색상 ( 영문 색상명 혹은 RGB값 ) |
width | 1 | number | brokenLine 의 pinHead 두께 ( 0 ~ ) | ||
length | 20 | number | brokenLine 의 pinHead 길이 ( 0 ~ ) | ||
opacity | 1 | number | brokenLine 의 pinHead 의 선 투명도 ( 0 ~ 1 ) |
var styles = { legend: { pinHead : { color : '#fff', width : 1, length : 20, /* tip.pinHead 길이 */ opacity : 1 } } }
legend.tip.pin 의 확장으로 막대 사탕 형태의 pinHead 스타일
value | type | 설명 | ||||
---|---|---|---|---|---|---|
legend | pinHead | size | 4 | number | lollpop 의 크기 ( 0 ~ ) | |
area | color | '#8397a6' | string | lollpop 영역의 색상 ( 영문 색상명 혹은 RGB값 ) | ||
line | color | '#8397a6' | string | lollpop 의 선 색상 ( 영문 색상명 혹은 RGB값 ) | ||
width | 1 | number | lollpop 의 선 두께 ( 0 ~ ) |
var styles = { legend: { pinHead : { size : 4, /* size */ area : { color : '#fff' }, line : { color : '#455763', width : 4 } } } }