리얼맵 파이 시리즈 연동
RealGrid2와 RealMap (opens in a new tab)의 파이 시리즈를 연동한 예제입니다.
지역 위에 파이 차트 등, 다양한 시리즈의 차트를 그릴 수 있습니다.
그리드 데이터 수정 시 파이시리즈 업데이트 기능을 통해 파이차트 데이터 업데이트가 가능합니다. 각 시리즈 마다 시리즈 정보를 가져와 포인트 속성을 업데이트 해야합니다.
const config = {
title: false,
map: [{
url: 'maps/kr-sido-low.geo.json',
padding: '0.1 0'
}],
body: {
projection: 'mercator'
},
annotations: [{
front: true,
type: 'shape',
shape: 'rectangle',
offsetX: 20,
offsetY: 20,
width: 10,
height: 28,
style: {
fill: '#FFD5A3'
}
},
{
front: true,
type: 'text',
text: '시도별 남녀 인구 구조',
offsetX: 40,
offsetY: 20,
height: 28,
style: {
fontSize: '15pt',
fontWeight: 700
}
}
],
legend: {
location: 'bottom'
},
series: [{
name: '행정구역경계(시도)',
dataUrl: '/data/kr-gender-ratio.json',
mapKeys: ['b-code', 'code'],
hoverColor: '#DBD4CE',
tooltipText: false,
style: {
stroke: '#fff',
strokeWidth: 0.7
},
pointColors: (args) => {
const ratio = args.source.genderRatio;
if (ratio < 1) return '#FFD5A3';
return '#FCE7C8';
},
visibleInLegend: false
},
{
type: 'pie',
name: '시도별 남녀 인구 비율(남/녀)',
minSize: 0.5,
legendByCategory: true,
categories: [{
name: '남자',
color: '#65AAEB'
},
{
name: '여자',
color: '#FD787F'
}
],
pointLabel: {
visible:true,
textCallback: (args) => {
const {
name,
total,
sido,
malePopulation,
femalePopulation
} = args.source;
return '${name}<br />' +(malePopulation/total*100).toFixed(1)+ "/" + (femalePopulation/total*100).toFixed(1);
}
},
tooltipText: false,
mapKeys: ['b-code', 'code'],
dataUrl: '/data/kr-gender-ratio.json'
}
]
}
//그리드 값 변경에 따른 파이 차트 업데이트
dataProvider.onRowUpdated = (provider, row) => {
const code = provider.getValue(row, 'code');
const malePopulation = provider.getValue(row, 'malePopulation');
const femalePopulation = provider.getValue(row, 'femalePopulation');
const pieSeries = chart.seriesByType('pie');
const point = pieSeries.pointById(code);
point.updateValues(pieSeries, { malePopulation: malePopulation, femalePopulation: femalePopulation, value:[malePopulation, femalePopulation] });
chart.render();
};