This example integrates RealGrid2 with the pie series from RealMap (opens in a new tab).
You can draw various series charts, such as pie charts, over regions.
When modifying grid data, you can update pie chart data using the pie series update function. For each series, you must retrieve series information and update point properties.
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();
};