맨위로가기
 

SBCHART

닫기

extend.map

#2.0.24

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

  • Type : Object
  • Format
    extend: {
        map: {
            theme: "avocado",
            mapUrl: "../data/SIGUNGU.json",
            panel: {
                type: "vlabel",
                data: "label",
                color: "#733410"
            },
            onclick: function(code, label, data) {
                alert (label  +  "click!");
            },
            mapColor: {
                color: "#FDE1E1",
                hoverColor: "#E2ECFF",
                selectColor: "#F4E9AB",
                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.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.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