드릴다운(Drilldown)

드릴다운 패널

현재 드릴다운 된 상태를 표시하고 이동 시킬 수 있는 패널을 제공한다. 기본적으로 드릴다운 된 맵 이력을 표시하고 맵 이름을 클릭하면 해당 맵이 기준이 되는 상태로 되돌린다.

아래처럼 이전 단계로 이동하는 버튼을 대신 표시할 수도 있다.

사용법

아래의 예제에서는 대한민국 시도/시군구 드릴다운을 구현한다.
초기 상태에서 시도 지도가 표시되고, 시도를 클릭하면 해당 시도의 시군구 지도가 표시된다.
다시 시도 지도로 돌아가려면 드릴다운 패널에서 시도 이름을 클릭하거나 이전 단계 버튼을 클릭한다.

지도 데이터 설정

{
    map: [
        {
            name: '시도',
            url: 'https://unpkg.com/realmap-collection/kr-sido-low.geo.json',
        },
        {
            name: '시군구',
            url: 'https://unpkg.com/realmap-collection/kr-sigun-low.geo.json',
        },
    ],
}

드릴다운에 필요한 지도 데이터를 모두 map 옵션에 배열로 설정한다.
지도에 고유한 식별자를 부여해야 한다. 이를 위해 name 속성을 사용한다.

클릭 이벤트 설정

{
    chart: {
        clickAction: 'drilldown'
    },
}

시도 지도를 클릭했을 때, 드릴다운하도록 설정하려면, chart.clickAction 속성을 drilldown 으로 설정한다.

맵 시리즈 설정

{
    series: [
        {
            map: '시도',
            useMapData: true,
            style: {
                stroke: '#4f4f4f',
                fill: '#e7e7e7',
                strokeWidth: 0.5,
            },
            detail: {
                map: '시군구',
                useMapData: true,
                style: {
                    stroke: '#4f4f4f',
                    fill: '#e7e7e7',
                    strokeWidth: 0.5,
                },
                onPointClick: args => {
                    const mapChart = args.chart;
 
                    mapChart.drillup(mapChart.series);
                },
            }
        },
    ]
}

하나의 맵 시리즈를 사용해서 드릴다운을 구현한다.
맵 시리즈에 시도 지도의 데이터를 설정한다. map 속성에 시도 지도의 name을 지정한다.
드릴다운 했을 때 나타나야 하는 시군구 지도를 위해, 맵 시리즈에 detail 속성을 설정한다.
마찬가지로 map 속성에 시군구 지도의 name을 지정한다.
시군구 지도를 클릭했을 때 다시 시도 지도로 돌아가도록 onPointClick 이벤트 핸들러를 설정한다.
mapChart.drillup() 메서드를 호출해서 드릴업(Drillup) 한다.

본 예제에서는 useMapData 속성을 사용했는데, 이는 클릭 이벤트가 발생하려면 맵시리즈에 데이터가 바인딩되어야 하기 때문이다. 따라서 useMapData를 사용하지 않아도 된다. data나 dataUrl로 데이터를 바인딩해도 된다.

Drilldown

전체 Config

{
    title: false,
    credits: {visible: false},
    chart: {
        clickAction: 'drilldown'
    },
    drilldownPanel: {
        type: 'button'
    },
    map: [
        {
            name: '시도',
            url: 'https://unpkg.com/realmap-collection/kr-sido-low.geo.json',
        },
        {
            name: '시군구',
            url: 'https://unpkg.com/realmap-collection/kr-sigun-low.geo.json',
        },
    ],
    body: {
        projection: 'mercator',
    },
    series: [
        {
            map: '시도',
            useMapData: true,
            style: {
                stroke: '#4f4f4f',
                fill: '#e7e7e7',
                strokeWidth: 0.5,
            },
            detail: {
                map: '시군구',
                useMapData: true,
                style: {
                    stroke: '#4f4f4f',
                    fill: '#e7e7e7',
                    strokeWidth: 0.5,
                },
                onPointClick: args => {
                    const mapChart = args.chart;
                    
                    mapChart.drillup(mapChart.series);
                },
            }
        },
    ],
}

드릴다운(Drilldown)

드릴다운 패널

사용법

지도 데이터 설정

클릭 이벤트 설정

맵 시리즈 설정

전체 Config

See Also