맨위로가기
 

SBCHART

닫기

Map Options

#latest  #options

맵(map) 차트 고유 옵션입니다.

Options

  • extend.map.theme

    map 차트의 테마를 지정합니다.

  • extend.map.onclick

    extend.map.onclick = function(code, label, data) { alert(label+" click!"); }

  • extend.map.drillDown

  • extend.map.drillDownLevel

    drillDown 속성 사용시 drillDown의 최대 레벨을 설정할 수 있는 속성입니다.
    2 level(시군구)에서 3 level(읍면동) 이동 여부를 설정하며, 2이하 입력시 2 level까지 접근하며, 3이상 입력시 3 level 이상 접근할 수 있습니다.

  • extend.map.drillUpClick

    extend.map.drillUpClick = function(code) { alert(code ? "3level > 2level : "+code : "2level > 1level"); }

  • extend.map.ratio

    map 차트 세부 지도의 비율을 설정합니다.

panel
  • extend.map.panel.type

    map 차트 위에 보여지는 text의 타입을 설정합니다.

  • extend.map.panel.data

    map 차트 위에 보여지는 text의 종류를 설정합니다.

  • extend.map.panel.color

    "vlabel" 일 경우 panel의 색상을 설정합니다.

mapColor
  • extend.map.mapColor.color

    map 영역 기본 색상을 지정합니다.

  • extend.map.mapColor.hoverColor

    map 영역 마우스오버 이벤트 발생시 기본 색상을 지정합니다.

  • extend.map.mapColor.selectColor

    map 영역 선택시 기본 색상을 지정합니다.

  • extend.map.mapColor.type

    extend.map.mapColor.type = "gradation"

  • extend.map.mapColor.startColor

    mapColor.type = "gradation" 시 시작 색상을 설정합니다.

  • extend.map.mapColor.endColor

    mapColor.type = "gradation" 시 끝 색상을 설정합니다.

mapAnimation
  • extend.map.mapAnimation.show

mapTooltip
  • extend.map.mapTooltip.type

    map 영역에 마우스오버시 나타날 툴팁의 타입을 설정합니다.

  • extend.map.mapTooltip.color

    기본 툴팁의 배경 색상을 설정합니다.

mapItem
  • extend.map.mapItem.type

    map 영역의 label 위의 item 형태를 지정합니다.

  • extend.map.mapItem.color

    item 색상을 지정합니다.

  • extend.map.mapItem.onmouseover

    extend.map.mapItem.onmouseover = function(code, label, data) { alert( label+" mouseover!" ); }

  • extend.map.mapItem.onclick

    extend.map.mapItem.onclick = function(code, label, data) { alert( label+" click!" ); }

  • extend.map.mapItem.imgUrl

    extend.map.mapItem.imgUrl = "/res/map-pin2.png"

  • extend.map.mapItem.imgWidth

    item img의 width를 지정합니다.

  • extend.map.mapItem.imgHeight

    item img의 height를 지정합니다.

Example

Code

var chart = sb.chart.render("#chartWrap", {
    data: {
        type : "map",
        json : [
            { "code" : 11, "강수량" : 30, "label" : "서울" },
            { "code" : 31, "강수량" : 50, "label" : "경기" },
            { "code" : 32, "강수량" : 100, "label" : "강원" },
            { "code" : 39, "강수량" : 120, "label" : "제주도" ,
                "tooltiphtml" : "<table><tr><td><img src='/res/images/map/jejusea.jpg' style='width:100px;height:50px;' />
                    </td></tr><tr><td>JEJUDO</td></tr></table>" },
            { "code" : 36, "강수량" : 20, "label" : "전남" }, 
            { "code" : 34, "강수량" : 55, 
                "tooltiphtml" : "<table><tr><td><img src='/res/images/map/chungnam.jpg' style='width:100px;height:30px;' />
                    </td></tr><tr><td>충청남도</td></tr></table>" },
            { "code" : 37, "강수량" : 47, 
                "tooltiphtml" : "<table><tr><td><img src='/res/images/map/sinnari.jpg' style='width:100px;height:68px;' />
                    </td></tr><tr><td>경북</td></tr></table>" },
            { "code" : 38, "강수량" : 48, 
                "tooltiphtml" : "<table><tr><td><img src='/res/images/map/gyungnam.gif' style='width: 160px;height:113px;' />
                    </td></tr><tr><td>경남</td></tr></table>" },
            { "code" : 11010, "강수량" : 60 },
            { "code" : 11020, "강수량" : 53 },
            { "code" : 11030, "강수량" : 74 },
            { "code" : 11040, "강수량" : 30 },
            { "code" : 11050, "강수량" : 120 },
            { "code" : 11060, "강수량" : 31 },
            { "code" : 11070, "강수량" : 40 },
            { "code" : 11080, "강수량" : 10 },
            { "code" : 11090, "강수량" : 60 },
            { "code" : 11100, "강수량" : 31 },
            { "code" : 11110, "강수량" : 110 },
            { "code" : 11120, "강수량" : 80 },
            { "code" : 11130, "강수량" : 62 },
            { "code" : 11140, "강수량" : 43 },
            { "code" : 11150, "강수량" : 62 },
            { "code" : 11160, "강수량" : 28 },
            { "code" : 11170, "강수량" : 35 },
            { "code" : 11180, "강수량" : 100 },
            { "code" : 11190, "강수량" : 72 },
            { "code" : 11200, "강수량" : 66 },
            { "code" : 11210, "강수량" : 39 },
            { "code" : 11220, "강수량" : 55 },
            { "code" : 11230, "강수량" : 81 },
            { "code" : 11240, "강수량" : 100 },
            { "code" : 11250, "강수량" : 92 }
        ],
        keys : {
            x : "code",
            value : ["강수량"]
        }
    },
    extend : {
        map : {
            mapUrl : "/res/SIGUNGU.json",
            drillDown : true,
            panel : {
                color : "#FFA9D4"
            },
            mapColor : {
                color : "#ED745F",
                type : "gradation",
                startColor : "#FF89C1",
                endColor : "#AE0E36"
            },
            mapItem : {
                color : "#E8FF4A"
            },
        }
    }
});