[Highcharts] Drill down

Drill down

drilldown 기능에 대해 더 자세히 그리고 더 많은 예제를 알고 싶다면 API 문서를 참고하라. 

 

3.0.8 버전 이후로, Highcharts는 drilldown 기능을 지원한다. 포인트 환경설정에 drilldown.series 배열에 해당하는 시리즈 환경 drilldown 옵션을 넣어줌으로써 포인트는 숨겨진 시리즈와 연결된다. 포인트가 클릭되면, 시리즈가 차트에 로드되고 이미 존재하는 시리즈는 교체된다. 칼럼과 바 그리고 파이 시리즈의 경우 한 번의 클릭이 드릴다운 시리즈로 변환됨을 알려줌을 시각적으로 도와주는 애니메이션이 발생한다. 포인트를 각 시리즈에 체이닝함으로써 다층 간 드릴링도 가능하다. 

BASIC SETUP

기본 셋업으로, drilldown 시리즈는 drilldown 설정 아래에서 별도의 배열로 정의된다. 각 시리즈 설정은 드릴다운 부모 포인트를 각각의 시리즈와 구별하기위한 id를 가진다.

series: [{
    name: 'Things',
    colorByPoint: true,
    data: [{
        name: 'Animals',
        y: 5,
        drilldown: 'animals'
    }, {
        name: 'Fruits',
        y: 2,
        drilldown: 'fruits'
    }, {
        name: 'Cars',
        y: 4,
        drilldown: 'cars'
    }]
}],
drilldown: {
    series: [{
        id: 'animals',
        data: [
            ['Cats', 4],
            ['Dogs', 2],
            ['Cows', 1],
            ['Sheep', 2],
            ['Pigs', 1]
        ]
    }, {
        id: 'fruits',
        data: [
            ['Apples', 4],
            ['Oranges', 2]
        ]
    }, {
        id: 'cars',
        data: [
            ['Toyota', 4],
            ['Opel', 2],
            ['Volkswagen', 2]
        ]
    }]
}

ASYNC SETUP

다양한 상황에서 drilldown 시리즈를 다이나믹하게 사용해야 할 경우가 있다. 이 경우 point.drilldown 옵션을 true로 변경하고 차트의 drilldown 이벤트를 클릭된 포인트의 시리즈 설정을 불러오도록 사용해라. 시리즈의 데이터를 불러오면, Chart.addSeriesAsDrilldown 메서드를 호출해 추가할 수 있다.