[javascript] Highcharts에서 동적 차트 만들기

27 Nov 2023

javascript

다이내믹한 데이터 시각화를 위해 Highcharts를 사용하는 경우가 많습니다. Highcharts는 JavaScript 기반의 대표적인 차트 라이브러리 중 하나이며, 간단한 사용법과 다양한 종류의 차트 유형을 제공합니다.

이번 포스트에서는 Highcharts를 사용하여 동적인 차트를 만드는 방법에 대해 알아보겠습니다.

Highcharts 설치하기

Highcharts를 사용하기 위해서는 먼저 Highcharts 라이브러리를 다운로드하고 웹 페이지에 포함해야 합니다.

Highcharts의 최신 버전은 Highcharts 공식 웹사이트에서 다운로드할 수 있습니다. 또는 npm 등의 패키지 매니저를 통해 설치할 수도 있습니다.

HTML 문서에 Highcharts 포함하기

Highcharts 라이브러리를 다운로드 받았다면, HTML 문서에 포함시켜야 합니다. HTML 문서의 <head> 태그 내에 아래와 같이 <script> 태그를 추가합니다.

<head>
  <title>Highcharts Example</title>
  <script src="path/to/highcharts.js"></script>
</head>

path/to/highcharts.js 부분에는 실제 Highcharts 라이브러리 파일의 경로를 입력해야 합니다.

동적 데이터로 차트 만들기

Highcharts에서 동적인 차트를 만들기 위해서는 JavaScript를 사용하여 데이터를 동적으로 변경해야 합니다.

예를 들어, 아래와 같이 Highcharts의 chart 메서드를 호출하여 차트를 생성할 수 있습니다.

// 차트 옵션 설정
var options = {
  chart: {
    type: 'bar'
  },
  title: {
    text: '동적 차트 예제'
  },
  xAxis: {
    categories: ['A', 'B', 'C']
  },
  yAxis: {
    title: {
      text: '값'
    }
  },
  series: [{
    name: 'Series 1',
    data: [1, 2, 3]
  }]
};

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

위 코드에서 options 객체에는 차트의 타입, 제목, 축 정보, 시리즈 데이터 등을 설정합니다. Highcharts.chart 메서드에는 차트를 출력할 HTML 요소의 아이디를 첫 번째 인자로, 차트 옵션을 두 번째 인자로 전달합니다.

차트 생성 이후에는 데이터를 동적으로 변경할 수 있습니다. chart 객체의 update 메서드를 호출하여 데이터를 변경할 수 있습니다. 예를 들어, options.series[0].data를 수정하여 차트에 표시할 데이터를 변경할 수 있습니다.

// 데이터 변경
options.series[0].data = [4, 5, 6];

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

위 코드에서는 시리즈 데이터를 [4, 5, 6]으로 변경하고, chart.update 메서드를 호출하여 차트를 업데이트합니다.

결론

Highcharts는 간편한 사용법과 다양한 차트 유형을 제공하는 인기 있는 JavaScript 차트 라이브러리입니다. 이번 포스트에서는 Highcharts를 사용하여 동적인 차트를 만드는 방법에 대해 알아보았습니다. Highcharts의 다양한 옵션과 API를 활용하여 개발자들은 다양한 동적 차트를 만들어 낼 수 있습니다.

더 자세한 정보는 Highcharts 공식 문서를 참고하시기 바랍니다.