[javascript] Highcharts에서 다중 축 차트 생성하기

27 Nov 2023

javascript

Highcharts는 다양한 유형의 차트를 생성할 수 있는 JavaScript 라이브러리입니다. 이번 토이 프로젝트에서는 Highcharts를 사용하여 다중 축 차트를 생성하는 방법에 대해 알아보겠습니다.

Highcharts 설치하기

먼저, Highcharts를 설치해야 합니다. Highcharts는 CDN을 통해 사용할 수 있으며, 아래와 같이 HTML 문서의 <head> 태그 내에 스크립트를 추가하여 사용할 수 있습니다.

<script src="https://code.highcharts.com/highcharts.js"></script>

다중 축 차트 생성하기

Highcharts에서 다중 축 차트를 생성하려면 yAxis 속성을 사용하여 추가 축을 정의하고, 해당 축에 데이터를 매핑해야 합니다.

Highcharts.chart('container', {
    // 차트 옵션 설정
    chart: {
        type: 'line'
    },
    title: {
        text: '다중 축 차트'
    },
    yAxis: [{ // 첫 번째 축
        title: {
            text: '첫 번째 축'
        }
    }, { // 두 번째 축
        opposite: true,
        title: {
            text: '두 번째 축'
        }
    }],
    series: [{
        data: [1, 3, 2, 4, 5], // 첫 번째 축 데이터
        yAxis: 0 // 첫 번째 축에 매핑
    }, {
        data: [4, 6, 8, 7, 3], // 두 번째 축 데이터
        yAxis: 1 // 두 번째 축에 매핑
    }]
});

위의 코드에서 yAxis 속성은 배열 형태로 정의되어 있습니다. 배열의 각 원소는 하나의 축을 나타내며, title 속성을 통해 축의 제목을 설정할 수 있습니다. 두 번째 축은 opposite: true 옵션을 통해 차트의 반대편에 위치시킬 수도 있습니다.

그리고 series 속성을 사용하여 각 데이터를 축에 매핑할 수 있습니다. yAxis 속성을 통해 데이터가 매핑될 축의 인덱스를 지정합니다.

결론

Highcharts를 사용하여 다중 축 차트를 생성하는 방법에 대해 알아보았습니다. yAxis 속성을 사용하여 추가 축을 정의하고, series 속성을 통해 데이터를 각 축에 매핑하는 방식입니다. Highcharts는 많은 유형의 차트를 지원하므로 다양한 데이터 시각화에 활용할 수 있습니다.

참고 문서: Highcharts 공식 문서