[javascript] Highcharts에서 인터랙티브 차트 만들기

27 Nov 2023

javascript

Highcharts는 JavaScript 기반의 인터랙티브 차트 라이브러리로, 사용자가 다양한 차트 유형을 생성하고 조작할 수 있도록 도와줍니다. 이 라이브러리를 사용하면 웹 페이지나 애플리케이션에 멋진 시각화 도구를 추가할 수 있습니다.

이번 글에서는 Highcharts를 사용하여 인터랙티브 차트를 만드는 방법에 대해 알아보겠습니다. 이 예제에서는 간단한 선 그래프를 생성하고 몇 가지 인터랙티브 기능을 추가하는 방법을 다룰 것입니다.

Highcharts 설치

Highcharts를 사용하려면 먼저 해당 라이브러리를 설치해야 합니다. 다음의 명령어를 사용하여 npm을 통해 Highcharts를 설치할 수 있습니다:

npm install highcharts

HTML에 Highcharts 스크립트 포함

Highcharts를 사용하기 위해 HTML 파일에 스크립트를 포함해야 합니다. 다음과 같은 코드를 HTML 파일의 <head> 태그 안에 추가합니다:

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

차트 생성

Highcharts를 사용하여 차트를 생성하기 위해 JavaScript 코드를 작성해야 합니다. 아래의 예제를 참조하세요:

// 차트 옵션 설정
var options = {
    chart: {
        type: 'line'
    },
    title: {
        text: '월간 판매량'
    },
    xAxis: {
        categories: ['1월', '2월', '3월', '4월', '5월', '6월']
    },
    yAxis: {
        title: {
            text: '판매량'
        }
    },
    series: [{
        name: '제품 A',
        data: [100, 200, 150, 300, 250, 180]
    }]
};

// 차트 생성
var chart = Highcharts.chart('chart-container', options);

위의 코드에서는 chart-container라는 ID를 가진 HTML 요소에 차트를 생성합니다. 차트 옵션은 options 객체에 설정하며, 차트의 유형, 제목, x축과 y축 레이블, 시리즈 데이터 등을 설정할 수 있습니다.

인터랙티브 기능 추가

Highcharts는 다양한 인터랙티브 기능을 제공합니다. 예를 들어, 마우스를 사용하여 차트 데이터를 확대/축소하거나 툴팁을 표시할 수 있습니다. 아래의 예제를 통해 몇 가지 인터랙티브 기능을 추가하는 방법을 알아보세요:

// 인터랙티브 기능 추가
options.chart.zoomType = 'x';
options.tooltip = {
    shared: true
};

// 차트 업데이트
chart.update(options);

위의 코드는 차트에 확대/축소 기능을 추가하고, 시리즈 데이터가 겹칠 때 툴팁을 공유하도록 설정합니다. chart.update() 함수를 사용하여 차트를 업데이트하고 새로운 옵션을 적용합니다.

결론

Highcharts를 사용하면 웹 페이지나 애플리케이션에 인터랙티브 차트를 쉽게 추가할 수 있습니다. 이 글에서는 Highcharts의 기본적인 사용법과 몇 가지 인터랙티브 기능을 소개했습니다. Highcharts의 다양한 옵션과 기능을 활용하여 원하는 형태의 차트를 만들어보세요.

더 자세한 내용은 Highcharts 공식 웹사이트를 참조하십시오.