#2.0.52
맵 차트에 서브차트(bar&pie) 사용을 위한 속성을 지정합니다.
mapChart export시 서브차트(bar & pie)는 svg 태그 밖에서 차트를 그리기 때문에 export시 맵만 표시합니다.
서브차트는 현재 전국지도(1 level)만 지원됩니다.
extend: {
map: {
subchart: {
show: true,
type: "bar",
basePosition: "code",
subDatas: [
{
position: {
code: 11,
x: 10,
y: 10,
},
data: {
type: "bar",
json: [
{"name": "seoul", "2015": 90, "2016": 120, "2017": 300},
],
keys: {
x: "name",
value: ["2015", "2016", "2017"]
}
},
},
{
position: {
code: 39,
x: 10,
y: 10,
},
data: {
type: "bar",
rows: [
['2015', '2016', '2017'],
[90, 120, 300],
]
},
},
{
position: {
code: 32,
x: 10,
y: 10,
},
data: {
type:"pie",
columns: [
['2015', 90],
['2016', 120],
['2017', 300]
]
},
},
],
extend: {
bar: {
padding: 5,
topRadius: 10,
width: 30,
},
pie: {
padding: 5,
fullCircle: false,
displayType: "value",
label: {
show: true,
format: function(value, ratio, id){
return value
},
},
},
},
global: {
onclick: function(data){
console.log(data);
},
size: {
width: 80,
height: 80
},
animation: {
show: true,
delay: 2000
ease: "bounce"
},
},
tooltip: {
show: true,
format: {
title: function(x) {
return x + "번째 제목입니다.";
},
name: function(name, ratio, id, index) {
return name;
},
value: function(value, ratio, id, index) {
return value;
}
},
},
}
}
}
#2.0.52
맵차트에 서브차트 사용 여부를 설정합니다.
subchart.show, subchart.type, subchart.subDatas는 필수 속성입니다.
#2.0.52
circle과 subchart(bar&pie)을 구분하기 위한 속성입니다
subchart.show, subchart.type, subchart.subDatas는 필수 속성입니다.
#2.0.52
맵차트에 subchart차트를 표시하기 위한 기준점을 설정합니다.
#2.0.52
map차트에 표시할 subchart(bar&pie)의 위치정보 및 차트 데이터를 설정합니다.
position과 data는 반드시 입력받아야 합니다.
subchart.show, subchart.type, subchart.subDatas는 필수 속성입니다.
| type | 속성명 | 설명 |
|---|---|---|
| 공통 | type | 서브차트 타입(bar&pie) |
| 공통 | labels | bar타입 차트 라벨 표시 여부 지정 |
| columns타입 | columns | 서브차트의 데이터를 배열형태로 지정 |
| rows타입 | rows | 서브차트의 데이터를 배열형태로 지정 |
| json타입 | json | 서브차트의 데이터를 JSON배열 형태로 지정 |
| keys | 서브차트의 x축 및 값으로 쓰일 속성을 지정 |
#2.0.52
서브차트의 각 막대 사이의 padding을 지정합니다.
#2.0.52
서브차트의 각 막대 상단의 곡선 반지름을 설정합니다.
#2.0.52
서브차트의 각 막대의 너비를 지정합니다.
#2.0.52
서브차트의 value 또는 퍼센트 표시 여부를 지정합니다.
#2.0.52
서브차트의 각 영역(원호) 사이의 여백을 지정합니다.
#2.0.52
서브차트의 각 막대 상단의 곡선 반지름을 설정합니다.
#2.0.52
서브차트(pie)의 라벨 표시 여부를 지정합니다.
#2.0.52
서브차트(파이)의 라벨을 커스터마이징합니다.
label: {
format: function(value, ratio, id) {
return value;
}
}
#2.0.52
맵 영역 클릭 이벤트 핸들러를 지정합니다.
subchart: {
global: {
onclick: function(data) {
console.log(data);
}
}
}
#2.0.52
서브차트의 너비를 설정합니다.
#2.0.52
서브차트의 높이를 설정합니다.
#2.0.52
서브차트의 애니메이션 효과의 사용 여부를 설정합니다.
bar타입은 rise, pie타입은 fan type을 제공합니다.
#2.0.52
서브차트의 애니메이션 효과가 완료되기까지의 시간을 설정합니다.
#2.0.52
서브차트 툴팁 표시 여부를 지정합니다.
#2.0.52
툴팁 제목을 지정합니다.
지정하지 않으면 X축 Tick 라벨이 제목이 됩니다.
#2.0.52
툴팁의 범례 이름을 변경합니다.
#2.0.52
툴팁의 범례 값을 변경합니다.