HORIZON CHART 의 전반적인 스타일에 대한 값을 정의
var defaultStyles = { layout : { area : { color : '#f8f8f8' }, line : { color : '#eaeaea', width : 1 } }, korea : { position : { x : 0, y : 0 }, scale : 1, line : { color : '#fff', width : 2 }, area : { color : [ '#fceb96', '#ffde59', '#ffc259', '#ff9632', '#fe753d', '#f45346', '#e63b3b' ] }, hover : { use : true, area : { color : '#9d9c9c' } } }, marker : { use : false, image : { src: '../img/marker.png' }, width : 30, height : 30 }, sea : { west : { position : { x : 75, y : 300 }, text : { value : 'West sea', family: 'Nanum Gothic', size: 15, color: '#666666', align: 'center', /* left | center | right */ style: 'normal', /* normal | italic */ weight: 'bold', /* normal | bold */ opacity: 1 } }, east : { position : { x : 510, y : 300 }, text : { value : 'West sea', family: 'Nanum Gothic', size: 15, color: '#666666', align: 'center', /* left | center | right */ style: 'normal', /* normal | italic */ weight: 'bold', /* normal | bold */ opacity: 1 } }, south : { position : { x : 280, y : 530 }, text : { value : 'West sea', family: 'Nanum Gothic', size: 15, color: '#666666', align: 'center', /* left | center | right */ style: 'normal', /* normal | italic */ weight: 'bold', /* normal | bold */ opacity: 1 } } } };
SVG 전체 영역 스타일
defalult | type | 설명 | |||
---|---|---|---|---|---|
layout | area | color | '#f8f8f8' | string | SVG 전체 영역의 배경 색상 |
line | color | '#eaeaea' | string | SVG 전체 영역의 테두리 색상 | |
width | 1 | number | SVG 전체 영역의 테두리 두께 |
var styles = { layout: { area : { color : '#f8f8f8' }, line : { color : '#eaeaea', width : 1 } } }
korea map 의 위치 설정
defalult | type | 설명 | |||
---|---|---|---|---|---|
korea | position | x | 0 | number | SVG 영역 안에서 korea map 의 X 축 위치 |
| y | 0 | number | SVG 영역 안에서 korea map 의 Y 축 위치 |
var styles = { korea: { position : { x : 20, y : 20 } } }
korea map 의 크기 설정
defalult | type | 설명 | ||
---|---|---|---|---|
korea | scale | 1 | number | korea map 의 크기 설정 ( 0 ~ ) |
var styles = { korea: { scale: 1.5 } }
지도 상의 각 지역 별 테두리 선 스타일
defalult | type | 설명 | |||
---|---|---|---|---|---|
korea | line | color | '#fff' | string | 지도 상의 각 지역 별 테두리 선 색상 (영문컬러명이나 RGB값 입력) |
width | 2 | number | 지도 상의 각 지역 별 테두리 선 두께 (0 ~ ) |
var styles = { korea: { line: { color : '#fff', width : 1 } } }
지도 상의 각 지역 별 테두리 선 스타일
default | type | 설명 | |||
---|---|---|---|---|---|
korea | area | color |
| array | 지도 상의 각 지역 별 면 색상 (영문컬러명이나 RGB값 입력) |
var styles = { korea: { area: { color : [ '#fceb96', '#ffde59', '#ffc259', '#ff9632', '#fe753d', '#f45346', '#e63b3b' ] } } }
korea map 마우스 오버 시 스타일 변경
default | type | 설명 | |||
---|---|---|---|---|---|
korea | use | false | boolean | korea map 마우스 오버 시 hover 이벤트 사용 여부 ( 'true' or 'false' ) | |
area | color | '#fff' | string | korea map 마우스 오버 시 해당 지역의 변경되는 면 색상 (영문컬러명이나 RGB값 입력) |
var styles = { korea: { area: { color : '#fff' } } }
marker 스타일 설정
value | type | 설명 | |||
---|---|---|---|---|---|
marker | use | 'true' | boolean | marker 사용 여부 ( 'true' or 'false' ) | |
image | src | 'marker.png' | string | marker 이미지 url | |
width | 30 | number | marker 의 넓이 ( 0 ~ ) | ||
height | 30 | number | marker 의 높이 ( 0 ~ ) |
var styles = { marker: { use: true, image : { src : 'marker.png' }, width : 30, height : 30 } }
지도 상에서 동해, 서해, 남해를 TEXT 로 표현
value | type | 설명 | ||||
---|---|---|---|---|---|---|
sea | west | position | x | 75 | number | text 의 X 축 위치 |
y | 300 | number | text 의 Y 축 위치 | |||
text | value | 'West sea' | string | text 의 value 값 정의 | ||
family | 'Nanum Gothic' | string | 글꼴 종류 이름 ( 영문명 ) | |||
size | 15 | number | 글꼴 크기 ( px 단위 ) | |||
color | '#666666' | string | 글꼴 색상 ( 영문 색상명 혹은 RGB값 ) | |||
align | 'center' | string | 텍스트 align ( 'left' or 'right' or 'center' ) | |||
style | 'normal' | string | 글꼴 모양 ( 'normal' or 'italic') | |||
weight | 'normal' | string | 글꼴 두께 ( 'normal' or 'bold' ) | |||
opacity | 1 | number | 글꼴 투명도 ( 0 ~ 1 ) | |||
east | sea.west 와 스타일 정의 동일 | |||||
south | sea.west 와 스타일 정의 동일 |
var styles = { sea : { west : { position : { x : 75, y : 300 }, text : { value : 'West sea', family: 'Nanum Gothic', size: 15, color: '#666666', align: 'center', /* left | center | right */ style: 'normal', /* normal | italic */ weight: 'bold', /* normal | bold */ opacity: 1 } }, east : { position : { x : 510, y : 300 }, text : { value : 'West sea', family: 'Nanum Gothic', size: 15, color: '#666666', align: 'center', /* left | center | right */ style: 'normal', /* normal | italic */ weight: 'bold', /* normal | bold */ opacity: 1 } }, south : { position : { x : 280, y : 530 }, text : { value : 'West sea', family: 'Nanum Gothic', size: 15, color: '#666666', align: 'center', /* left | center | right */ style: 'normal', /* normal | italic */ weight: 'bold', /* normal | bold */ opacity: 1 } } } }