#2.0.24
맵 차트에 대한 확장 옵션을 지정합니다.
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,
},
vlabelMinWidth: 5,
vlabelRectColor: "pink",
vlabelSelectAreaOnclick: true,
vlabelOnclick: function(code) {
alert ( code + " vlabelOnclick");
},
},
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",
imgUrls:[
"code": "39", "src": "./images/map-pin2.png", "width": "30", "height":"40"},
],
imgWidth: 20,
imgHeight: 20
}
showDefaultLabel: true,
defaultLabelColor: "gray",
selectedLabelColor: "red",
hoverLabelColor: "yellow",
onAfterRender: function() {
alert (label + "onAfterRender !");
},
useFullScreen: true,
}
}
#2.0.24
맵차트의 테마를 설정합니다.
#2.0.24
맵차트를 그리는 데이터의 경로를 설정합니다.
기본 경로는 현재 페이지와 같은 경로입니다.
#2.0.24
맵차트 위에 보여지는 text의 타입을 설정합니다.
vlabel 속성은 value 값이 필수 속성입니다.
#2.0.24
맵차트 위에 보여지는 text의 종류를 설정합니다.
#2.0.24
"vlabel" 일 경우 panel의 색상을 설정합니다.
#2.0.29
panel의 format을 설정합니다.
extend: {
map: {
panel: {
format: function(code, label, data) {
return data["강수량"] + "mm";
}
}
}
}
#2.0.75
"vlabel" 일 경우 panel의 Text 색상을 설정합니다.
#2.0.75
"vlabel" 일 경우 panel(title영역)의 텍스트 그림자 표시 여부를 설정합니다.
#2.0.75
"vlabel" 일 경우 panel(value영역)의 배경색상을 설정합니다.
#2.0.75
"vlabel" 일 경우 panel(value영역)의 텍스트색상을 설정합니다.
#2.0.89
panel의 text를 multiline으로 사용할 것인지를 설정합니다.
panel.type이 "square"인 경우에만 사용가능합니다.
2줄까지만 가능합니다.
1번째 줄의 fontweight은 자동으로 bold로 설정됩니다.
#2.0.89
panel의 text를 multiline으로 설정시 line간의 간격을 설정합니다.
panel.type이 "square"이고, useLabelMultiLine=true인 경우에만 사용가능합니다.
default : 1.3 (단위 : em)
#2.0.89
panel의 mouse관련 이벤트를 동작실킬지를 설정합니다.(mouse in/out/click event)
panel.type이 "square"인 경우에만 사용가능합니다.
설정시 지도위에 존재하므로 지도와 겹쳐지는 영역에서는 지도의 이벤트가 처리되지 않습니다.
#2.0.89
panel을 click할때의 callback event를 설정합니다.
panel.type이 "square"인 경우에만 사용가능합니다.
parameter로는 code, name, keyValue, data를 전달합니다.
extend: {
map: {
panel: {
useMapItemOnclick: function(code, name, keyValue, data) {
alert(name + "click!");
}
}
}
#2.0.89
panel의 배경색을 설정합니다.
panel.type이 "square"인 경우에만 사용가능합니다.
default는 설정하지 않습니다.
#2.0.89
panel의 배경색의 투명도를 설정합니다.
panel.type이 "square"인 경우에만 사용가능합니다.
default는 설정하지 않습니다.
입력값의 범위는 0 ~ 1 입니다.
#2.0.89
panel의 크기를 사용자가 직접 설정합니다.
width와 height를 설정합니다
panel.type이 "square"인 경우에만 사용가능합니다.
extend: {
map: {
panel: {
mapItemSize: {
width: 70,
height: 50,
}
}
}
}
#2.0.160
panel의 최소 넓이를 설정합니다.
panel.type이 "vlabel"인 경우에만 사용가능합니다.
default는 설정하지 않습니다.
#2.0.160
panel Hover시에 타이틀의 배경색을 설정합니다.
panel.type이 "vlabel"인 경우에만 사용가능합니다.
default는 설정하지 않습니다.
#2.0.160
panel 클릭시에 callback함수를 설정합니다.
panel.type이 "vlabel"인 경우에만 사용가능합니다.
extend: {
map: {
panel: {
vlabelOnclick: function(code) {
alert(code + " vlabelOnclick!");
}
}
}
}
#2.0.162
panel click시에 해당 지역의 색상을 선택된 색상으로 변경하도록 설정합니다.
panel.type이 "vlabel"인 경우에만 사용가능합니다.
default는 설정하지 않습니다.
#2.0.24
맵 영역 클릭 이벤트 핸들러를 지정합니다.
extend: {
map: {
onclick: function(code, label, data) {
alert(label + "click!");
}
}
}
#2.0.24
맵 영역의 기본 색상을 지정합니다.
#2.0.24
맵 영역 마우스오버 이벤트 발생시 기본 색상을 지정합니다.
#2.0.167
맵 영역 마우스오버 이벤트 발생시 단색으로 처리하지 않고 사용자가 원하는 설정에 맞게 지정할 수 있도록 callback함수를 설정합니다.
#2.0.24
맵 영역 선택시 기본 색상을 지정합니다.
#2.0.71
맵 영역 마우스오버 이벤트 발생시 색상 표시 여부를 설정하는 속성입니다.
#2.0.71
맵 영역 선택 시 색상 표시 여부를 설정하는 속성입니다.
#2.0.24
data.keys.value에 매핑되는 값에 따라 색상을 조절합니다.
#2.0.28
mapColor.type gradation시 시작 색상을 지정합니다.
#2.0.28
mapColor.type gradation시 끝 색상을 지정합니다.
#2.0.24
각 지역 클릭시 해당 지역의 세부 지도 표시 여부를 설정합니다.
#2.0.30
drillDown 속성 사용시, 세부 지도에서 상위 지도로 이동하는 drillUp 버튼 클릭 이벤트 핸들러를 지정합니다.
읍면동(3 level)에서 시군구(2 level)로 drillUp 시에만 파라미터로 해당 지역의 code값을 전달합니다.
extend: {
map: {
drillUpClick: function(code) {
alert(code + "!");
}
}
}
#2.0.62
drillDown 속성 사용시 drillDown의 최대 레벨을 설정할 수 있는 속성입니다.
해당 기능은 시군구(2 level)에서 읍면동(3 level)에 접근 여부를 제어하기 위한 속성으로 3보다 적은 값을 입력받으면 시군구(2 level)까지 표시됩니다.
#2.0.62
drillDown 속성 사용시 세부 지도에서 상위 지도로 이동하는 drillUp 버튼의 이미지의 경로를 설정합니다.
#2.0.62
drillUp버튼 이미지의 너비를 설정합니다.
#2.0.62
drillUp버튼 이미지의 높이를 설정합니다.
#2.0.62
drillUp 버튼 이미지의 x축 기준으로 위치를 설정합니다.
#2.0.62
drillUp 버튼 이미지의 y축 기준으로 위치를 설정합니다.
#2.0.109
map차트에서 지도데이터(json파일)에 있는 지역명을 보일지를 설정합니다.
#2.0.109
map차트에서 지도데이터(json파일)에 있는 지역명을 보일시에 Label의 색상을 설정합니다.
#2.0.142
map차트에서 지도데이터(json파일)에 있는 지역명을 보일시에 선택된 Label의 색상을 설정합니다.
#2.0.142
map차트에서 지도데이터(json파일)에 있는 지역명을 보일시에 마우스 Hover시의 Label의 색상을 설정합니다.
#2.0.28
drillDown시 나타나는 세부 지도의 비율을 설정합니다.
#2.0.24
맵 영역 선택시 애니메이션 여부를 설정합니다.
#2.0.24
맵 영역에 마우스오버시 나타날 툴팁의 타입을 설정합니다.
"html" 일 경우 mapItem.type 속성은 필수입니다.
#2.0.24
기본 툴팁의 배경 색상을 설정합니다.
#2.0.24
맵 영역의 label 위의 item 형태를 지정합니다.
#2.0.24
item 마우스오버 이벤트 핸들러를 지정합니다.
map: {
mapItem: {
onmouseover: function(code, label, data) {
alert (label + "mouseover!");
}
}
}
#2.0.24
item click 이벤트 핸들러를 지정합니다.
map: {
mapItem: {
onclick: function(code, label, data) {
alert (label + "click!");
}
}
}
#2.0.24
item img의 경로를 지정합니다.
extend.map.mapItem.type = "img" 속성은 필수입니다.
image 경로가 틀릴 경우 차트가 표시되지않을 수 있습니다.
#2.0.140
item 각 지역별 img의 경로를 지정합니다.
image 경로가 틀릴 경우 차트가 표시되지않을 수 있습니다.
#2.0.24
item img의 width를 지정합니다.
#2.0.24
item img의 height를 지정합니다.
#2.0.146
맵 차트 생성완료후 발생하는 event.
extend: {
map: {
onAfterRender: function() {
alert("onAfterRender !");
}
}
}
#2.0.155
map차트에서 container의 size를 최대한 활용해서 맵chart를 크게 그리도록 설정합니다.