[Highcharts] Bubble legend

Bubble legend

Introduction

버블 범례는 추가적인 엘리먼트로 차트 범례 어디서든 붙일 수 있다. 

버블 범례는 버블 시리즈의 크기를 간단하고 투명한 방식으로 크기를 표할 수 있다. 

 

Demo with autoranges

Demo with the bubble legend styled in a similar way to the series

Demo with ranges

Installation

사용을 위해선 highcharts-more.js 라이브러리가 필요하다. 버블 범례를 나타내기 위해서는, legend.bubbleLegend.enabled값을 true로 바꾸면 된다. 

 

Configuration

bubbleLegend의 코드는 세팅하기 매우 쉬우며 다양한 커스터마이징이 가능하다. minSize, maxSize, sizeBy 뿐만 아니라 크기 계산 메서드도 버블 시리즈에서 똑같은 방식으로 작동한다. 

 

Use Cases

버블 범례를 차트에 추가하는 방법으로는 두 가지가 있다:

 

1. Automatic: 범위를 설정하지 않는다. 세 개의 버블을 범례에 생성하고, 가장 작고 가장 큰 범례는 같은 차원에서 값에 따라 해당하는 위치에 놓인다. 가운데 버블은 다른 두 개 값의 평균값을 가진다. 차트에 오로지 하나의 버블만이 있다면, 버블 범례는 하나의 버블만을 가진다. 

{
    chart: {
        type: 'bubble'
    },
    legend: {
        bubbleLegend: {
            enabled: true
        }
    },
    series: [{
        data: [
            [9, 81, 63],
            [98, 5, 89],
            [51, 50, 73],
            [41, 22, 14],
            [58, 24, 20]
        ]
    }]
}

2. Custom: 범위가 인위적으로 설정됨. 버브ㄹ은 ranges, minSize, maxSize에 의해 계산되고 버블 시리즈의 영역은 포함되지 않는다. 

{
    chart: {
        type: 'bubble'
    },
    legend: {
        bubbleLegend: {
            enabled: true,
            minSize: 20,
            maxSize: 60,
            ranges: [{
                value: 14
            }, {
                value: 89
            }]
        }
    },
    series: [{
        minSize: 20,
        maxSize: 60,
        data: [
            [9, 81, 63],
            [98, 5, 89],
            [51, 50, 73],
            [41, 22, 14],
            [58, 24, 20]
        ]
    }]
}