맨위로가기
 

SBCHART

닫기

extend.map

#2.0.24

맵 차트에 대한 확장 옵션을 지정합니다.

  • Type : Object
  • Format
    extend: {
        map: {
            theme: "avocado",
            mapUrl: "../data/SIGUNGU.json",
            panel: {
                type: "vlabel",
                data: "label",
                color: "#733410",
                format: function(code, label, data) {
                    return data["강수량"] + "mm";
                },
                textColor: "#733410",
                showTextShadow: true,
                value: {
                    color: "#EEEEEE",
                    textColor: "red",
                },
                useLabelMultiLine: true,
                labelMultiLineGap: 1.5,
                useMapItemEvent: true,
                useMapItemOnclick: function(code, name, keyValue, data) {
                    alert ( name + "click");
                },
                mapItemBackColor: "black",
                mapItemBackColorOpacity: 0.5,
                mapItemSize: {
                    width: 70,
                    height: 50,
                },
            },
            onclick: function(code, label, data) {
                alert (label  +  "click!");
            },
            mapColor: {
                color: "#FDE1E1",
                hoverColor: "#E2ECFF",
                selectColor: "#F4E9AB",
                showHoverColor: false,
                showSelectColor: false,
                type: "gradation",
                startColor: "#F3F3F3",
                endColor: "SteelBlue"
            },
            drillDown: true,
            drillDownLevel: 2,
            drillUpClick: function(code) {
                alert (code  +  "!");
            },
            drillDownImage: {
                url: "../images/back.png",
                width: 100,
                height: 70,
                x: 50,
                y: 50
            },
            ratio: 4,
            mapAnimation: {
                show: true
            },
            mapTooltip: {
                type: "html",
                color: "#4641D9"
            },
            mapItem: {
                type: "circle",
                onmouseover: function(code, label, data) {
                    alert (label  +  "mouseover!");
                },
                onclick: function(code, label, data) {
                    alert (label  +  "click!");
                },
                imgUrl: "../img/map-pin1.png",
                imgWidth: 20,
                imgHeight: 20
            }
        }
    }
    

extend.map.theme

#2.0.24

맵차트의 테마를 설정합니다.

  • Type : String
  • Attributes :
    • "grape"
    • "avocado"
    • "cotton"
    • "leaf"
    • "rain"
    • "ocean"

extend.map.mapUrl

#2.0.24

맵차트를 그리는 데이터의 경로를 설정합니다.
기본 경로는 현재 페이지와 같은 경로입니다.

  • Type : String

extend.map.panel.type

#2.0.24

맵차트 위에 보여지는 text의 타입을 설정합니다.
vlabel 속성은 value 값이 필수 속성입니다.

  • Type : String
  • Attributes :
    • "none" : 기본
    • "square" : 사각형
    • "vlabel" : vertical 방향의 label, value

extend.map.panel.data

#2.0.24

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

  • Type : String
  • Attributes :
    • "value" : data.keys.value 와 매핑되는 데이터
    • "label" : 지역명

extend.map.panel.color

#2.0.24

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

  • Type : String

extend.map.panel.format

#2.0.29

panel의 format을 설정합니다.

  • Type : Function
  • Format
    extend: {
      map: {
         panel: {
           format: function(code, label, data) {
             return data["강수량"] + "mm";
           }
         }
      }
    }
    

extend.map.panel.textColor

#2.0.75

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

  • Type : String

extend.map.panel.showTextShadow

#2.0.75

"vlabel" 일 경우 panel(title영역)의 텍스트 그림자 표시 여부를 설정합니다.

  • Type : Boolean

extend.map.panel.value.color

#2.0.75

"vlabel" 일 경우 panel(value영역)의 배경색상을 설정합니다.

  • Type : String

extend.map.panel.value.textColor

#2.0.75

"vlabel" 일 경우 panel(value영역)의 텍스트색상을 설정합니다.

  • Type : String

extend.map.panel.useLabelMultiLine

#2.0.89

panel의 text를 multiline으로 사용할 것인지를 설정합니다.

panel.type이 "square"인 경우에만 사용가능합니다.

2줄까지만 가능합니다.

1번째 줄의 fontweight은 자동으로 bold로 설정됩니다.

  • Type : Boolean

extend.map.panel.labelMultiLineGap

#2.0.89

panel의 text를 multiline으로 설정시 line간의 간격을 설정합니다.

panel.type이 "square"이고, useLabelMultiLine=true인 경우에만 사용가능합니다.

default : 1.3 (단위 : em)

  • Type : Number

extend.map.panel.useMapItemEvent

#2.0.89

panel의 mouse관련 이벤트를 동작실킬지를 설정합니다.(mouse in/out/click event)

panel.type이 "square"인 경우에만 사용가능합니다.

설정시 지도위에 존재하므로 지도와 겹쳐지는 영역에서는 지도의 이벤트가 처리되지 않습니다.

  • Type : Boolean

extend.map.panel.useMapItemOnclick

#2.0.89

panel을 click할때의 callback event를 설정합니다.

panel.type이 "square"인 경우에만 사용가능합니다.

parameter로는 code, name, keyValue, data를 전달합니다.

  • Type : Function
  • Format
    extend: {
      map: {
         panel: {
         useMapItemOnclick: function(code, name, keyValue, data) {
             alert(name  +  "click!");
         }
      }
    }
    
  • Function 파라미터
    • code : 지역 코드
    • name : 지역 라벨
    • keyValue : null
    • data : 데이터

extend.map.panel.mapItemBackColor

#2.0.89

panel의 배경색을 설정합니다.

panel.type이 "square"인 경우에만 사용가능합니다.

default는 설정하지 않습니다.

  • Type : String

extend.map.panel.mapItemBackColorOpacity

#2.0.89

panel의 배경색의 투명도를 설정합니다.

panel.type이 "square"인 경우에만 사용가능합니다.

default는 설정하지 않습니다.

입력값의 범위는 0 ~ 1 입니다.

  • Type : Number

extend.map.panel.mapItemSize

#2.0.89

panel의 크기를 사용자가 직접 설정합니다.

width와 height를 설정합니다

panel.type이 "square"인 경우에만 사용가능합니다.

  • Type : Object
  • Format
    extend: {
      map: {
         panel: {
            mapItemSize: {
               width: 70,
               height: 50,
            }
         }
      }
    }
    

extend.map.onclick

#2.0.24

맵 영역 클릭 이벤트 핸들러를 지정합니다.

  • Type : Function
  • Format
    extend: {
      map: {
         onclick: function(code, label, data) {
             alert(label  +  "click!");
         }
      }
    }
    
  • Function 파라미터
    • code : 지역 코드
    • label : 지역 라벨
    • data : 지역 데이터

extend.map.mapColor.color

#2.0.24

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

  • Type : String

extend.map.mapColor.hoverColor

#2.0.24

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

  • Type : String

extend.map.mapColor.selectColor

#2.0.24

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

  • Type : String

extend.map.mapColor.showHoverColor

#2.0.71

맵 영역 마우스오버 이벤트 발생시 색상 표시 여부를 설정하는 속성입니다.

  • Type : Boolean

extend.map.mapColor.showSelectColor

#2.0.71

맵 영역 선택 시 색상 표시 여부를 설정하는 속성입니다.

  • Type : Boolean

extend.map.mapColor.type

#2.0.24

data.keys.value에 매핑되는 값에 따라 색상을 조절합니다.

  • Type : String
  • Attributes :
    • "gradation" : extend.map.mapColor.color 값을 기준으로 명도조절됩니다.

extend.map.mapColor.startColor

#2.0.28

mapColor.type gradation시 시작 색상을 지정합니다.

  • Type : String

extend.map.mapColor.endColor

#2.0.28

mapColor.type gradation시 끝 색상을 지정합니다.

  • Type : String

extend.map.drillDown

#2.0.24

각 지역 클릭시 해당 지역의 세부 지도 표시 여부를 설정합니다.

  • Type : Boolean

extend.map.drillUpClick

#2.0.30

drillDown 속성 사용시, 세부 지도에서 상위 지도로 이동하는 drillUp 버튼 클릭 이벤트 핸들러를 지정합니다.
읍면동(3 level)에서 시군구(2 level)로 drillUp 시에만 파라미터로 해당 지역의 code값을 전달합니다.

  • Type : Function
  • Format
    extend: {
      map: {
         drillUpClick: function(code) {
             alert(code  +  "!");
         }
      }
    }
    
  • Function 파라미터
    • code : 지역 코드

extend.map.drillDownLevel

#2.0.62

drillDown 속성 사용시 drillDown의 최대 레벨을 설정할 수 있는 속성입니다.
해당 기능은 시군구(2 level)에서 읍면동(3 level)에 접근 여부를 제어하기 위한 속성으로 3보다 적은 값을 입력받으면 시군구(2 level)까지 표시됩니다.

  • Type : Number
  • Default :3

extend.map.drillDownImage.url

#2.0.62

drillDown 속성 사용시 세부 지도에서 상위 지도로 이동하는 drillUp 버튼의 이미지의 경로를 설정합니다.

  • Type : String

extend.map.drillDownImage.width

#2.0.62

drillUp버튼 이미지의 너비를 설정합니다.

  • Type : Number

extend.map.drillDownImage.height

#2.0.62

drillUp버튼 이미지의 높이를 설정합니다.

  • Type : Number

extend.map.drillDownImage.x

#2.0.62

drillUp 버튼 이미지의 x축 기준으로 위치를 설정합니다.

  • Type : Number

extend.map.drillDownImage.y

#2.0.62

drillUp 버튼 이미지의 y축 기준으로 위치를 설정합니다.

  • Type : Number

extend.map.ratio

#2.0.28

drillDown시 나타나는 세부 지도의 비율을 설정합니다.

  • Type : Number
  • Default : 0
  • Attributes :
    • 0 ~ 10

extend.map.mapAnimation.show

#2.0.24

맵 영역 선택시 애니메이션 여부를 설정합니다.

  • Type : Boolean

extend.map.mapTooltip.type

#2.0.24

맵 영역에 마우스오버시 나타날 툴팁의 타입을 설정합니다.
"html" 일 경우 mapItem.type 속성은 필수입니다.

  • Type : String
  • Attributes :
    • "default" : 기본
    • "html" : data.json의 tooltiphtml 값을 툴팁 컨텐츠로 생성합니다.

extend.map.mapTooltip.color

#2.0.24

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

  • Type : String

extend.map.mapItem.type

#2.0.24

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

  • Type : String
  • Attributes :
    • "circle" : 중앙이 흰색인 원 형태의 아이템
    • "square" : 사각형 형태의 아이템
    • "fullcircle" : 채워진 원 형태의 아이템
    • "img" : 사용자가 지정한 이미지 아이템

extend.map.mapItem.onmouseover

#2.0.24

item 마우스오버 이벤트 핸들러를 지정합니다.

  • Type : Function
  • Format
    map: {
      mapItem: {
         onmouseover: function(code, label, data) {
             alert (label  +  "mouseover!");
         }
      }
    }
    
  • Function 파라미터
    • code : 지역 코드
    • label : 지역 라벨
    • data : 지역 데이터

extend.map.mapItem.onclick

#2.0.24

item click 이벤트 핸들러를 지정합니다.

  • Type : Function
  • Format
    map: {
      mapItem: {
         onclick: function(code, label, data) {
             alert (label  +  "click!");
         }
      }
    }
    
  • Function 파라미터
    • code : 지역 코드
    • label : 지역 라벨
    • data : 지역 데이터

extend.map.mapItem.imgUrl

#2.0.24

item img의 경로를 지정합니다.
extend.map.mapItem.type = "img" 속성은 필수입니다.
image 경로가 틀릴 경우 차트가 표시되지않을 수 있습니다.

  • Type : String

extend.map.mapItem.imgWidth

#2.0.24

item img의 width를 지정합니다.

  • Type : Number

extend.map.mapItem.imgHeight

#2.0.24

item img의 height를 지정합니다.

  • Type : Number