style (cfg.point.chart)
point 데이터를 이용해서 생성한 차트 영역의 스타일을 설정합니다.
참고 : point.symbol 스타일에는 영향을 끼치지 않습니다.
Type
object
Options
| Value |
Description |
object |
차트 영역의 스타일을 설정 |
style Info
| name |
type |
required(Default) |
description |
height |
number |
선택(30) |
차트 영역의 높이 설정 |
width |
number |
선택(30) |
차트 영역의 너비 설정 |
backgroundColor |
string |
선택("transparent") |
차트 영역의 배경색 설정 |
border |
object |
선택 |
차트 영역의 테두리 설정 |
labelColor |
string |
선택(’#666666’) |
chart label의 font 색상 |
labelSize |
number |
선택(15) |
chart label의 font 크기 |
labelPos |
string |
선택('bottom') |
chart 기준 label의 위치('top','bottom','left','right') |
labelX |
number |
선택 |
label의 x축 방향 위치 조정 |
labelY |
number |
선택 |
label의 y축 방향 위치 조정 |
labelLineBreak |
string |
선택 |
레이블을 줄바꿈 기준 설정 |
textAlign |
string |
선택 |
레이블을 줄바꿈 시 문자 정렬 설정('left', 'center', 'right') |
labelBorderColor |
string |
선택 |
label 외곽선(테두리) 색상 설정 |
labelBorderWidth |
number |
선택 |
label 외곽선(테두리) 두께 설정(px) |
style.border Info
| name |
type |
required(Default) |
description |
width |
number |
선택(0) |
테두리 너비 설정 |
color |
string |
선택("green") |
테두리 색상 설정 |
radius |
number |
선택(3) |
테두리 radius 설정 |
Example
IBMapCharts.config({
point : {
chart : {
style : {
height : 50,
width : 40,
backgroundColor : "skyblue",
border : {
width : 5,
color : "blue",
radius : 10
}
}
}
}
});
var myData = [
{
"id": "kh99984",
"name": "청주",
"lat": 36.55532355204175,
"lon": 127.57820815472276,
"chart":{
"label": "청주시 상당구 가덕면",
"style": {
"width":50,
"height":50,
"labelPos":"left",
"labelColor":"#FF5555",
"labelSize":10,
"border": {
"width": 2,
"color": "#0000FF",
"radius": 5
}
},
},
"data": [
{
"name": "좋음",
"value": 19
},
{
"name": "보통",
"value": 22
},
{
"name": "나쁨",
"value": 50
}
]
},
];
ibmap.point.clear();
ibmap.point.add( myData );
ibmap.point.show( "pie" );

since
| version |
desc |
| 8.0.0.1 |
기능 추가 |
| 8.0.0.3 |
labelX, labelY 속성 추가 |
| 8.0.0.11 |
labelLineBreak, textAlign 속성 추가 |
| 8.0.0.13 |
labelBorderColor, labelBorderWidth 속성 추가 |