Map 시리즈

Map area 영역들을 관련된 값에 따라 단계별로 구분되는 색상으로 칠하는 시리즈.
choropleth map(단계 구분도. 색상으로 area별 특성을 나타내는 지도)이라고 한다. RealMap 차트 설정에서 type을 지정하지 않으면 생성되는 기본 시리즈이다. 맵 chart가 지도처럼 보이려면 반드시 하나 이상의 map series가 차트에 포함돼야 한다.
시리즈 type은 'map'으로 지정한다. 또, 설정 옵션 모델은 MapSeriesOptions이고, 차트 구성 요소 모델은 MapSeries이다.

시리즈 작성 방법

series: [
    {
        tooltipText: '${name}   ${id}',
        data: [
            { id: '11', value: 10 },
            { id: '31', value: 20 },
        ]
    }
]

해설

지역에 데이터를 연결하거나 툴팁, 레이블, 스타일을 설정할 때 사용합니다.
특이사항: type을 지정하지 않는 경우, MapSeries로 간주합니다.

데이터 바인딩

{
    data: [
        { id: '11', value: 10 }, // 서울
        { id: '31', value: 20 }, // 경기도
    ]
}

data 옵션을 통해 맵시리즈에서 사용할 데이터를 등록합니다.
데이터와 지역의 아이디가 같은 경우, 바인딩됩니다.
기본 설정으로 이름이 "id"인 속성을 아이디로 간주합니다.

지역의 아이디에 대해서

"features": [
    {
        "id": "11"
        "type": "Feature",
        "geometry": {
            "type": "Polygon",
            "coordinates": [/*...*/]
        },
        "properties": {
            "rm-id": "11",
            "name": "서울특별시",
        },
    },
    /*... 지역 개수만큼 feature 객체가 있습니다.*/
]

앞서 사용한 지도 데이터(config.map.source)에서 확인할 수 있습니다.
- 지역 = feature
- features[].id
geojson파일을 열어서 확인하거나, 개발자도구로 지역을 선택해서 확인할 수 있습니다.

예외상황: 데이터에 id 속성이 없고, 이를 수정할 수 없는 경우(mapKeys)

mapKeys를 사용하면 됩니다.
데이터의 어떤 속성을 사용해서 지역과 데이터를 연결할지를 설정하는 옵션입니다.

// 데이터의 아이디가 code 인 경우
{
    // 첫번째가 지도의 아이디, 두번째가 데이터의 아이디. 이 둘을 맵핑. 이 경우 데이터의 code를 id로 간주하게 됨.
    mapKeys: ['id', 'code'],
    data: [
        { code: '11', value: 10 },
        { code: '31', value: 20 },
    ]
}

지역에 대한 툴팁과 라벨

{
    tooltipText: '${name}   ${id}',
    pointLabel: {
        visible: true,
        text: '${name}',
        style: {
            fontSize: 16
        }
    },
}

tooltipText로 툴팁을 설정할 수 있습니다.
pointLabel로 라벨을 설정할 수 있습니다.

지역 스타일 설정하기

{
    style: {
        stroke: '#2f4279'
    },
    nullStyle: {
        stroke: '#2f4279',
        fill: '#e0ebf9',
    },
    hoverStyle: {
        filter: 'brightness(1.2)'
    },
}

style로 데이터가 바인딩된 지역 스타일 설정할 수 있습니다.
nullStyle로 데이터가 바인딩되지 않은 지역 스타일 설정할 수 있습니다.
hoverStyle로 호버된 지역의 스타일 설정할 수 있습니다.

데이터에 따라 지역 색상 설정하기

data: [
    { code: '11', value: 10, color: '#a4c6ec' },
    { code: '31', value: 20, color: '#78a9e2' },
    { code: '32', value: 30, color: '#6794dc' },
]

맵시리즈는 데이터의 color 속성을 읽고 해당 지역의 색상을 결정합니다.
color 속성이 없는 경우, style, nullStyle에 의해 지역 색상이 결정됩니다. 이것도 없으면 기본 색상이 적용됩니다.
툴팁에도 해당 색상이 표시됩니다.