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                 // 테두리 radius 설정
                }
            }
        }
    }
});

// 데이터 로드 예
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" );

s

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 속성 추가