맨위로가기
 

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,
    		drillUpClick: function(code) {
    			alert (code  +  "!");
    		},
    		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.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