[javascript] Highcharts에서 스트림 그래프 만들기

27 Nov 2023

javascript

Highcharts는 JavaScript 기반의 강력한 차트 라이브러리로, 다양한 종류의 차트를 만들 수 있습니다. 이번에는 Highcharts를 사용하여 스트림 그래프를 만드는 방법을 알아보겠습니다. 스트림 그래프는 데이터의 흐름을 시각적으로 나타내는데 유용한 그래프입니다.

1. Highcharts 설치 및 설정

먼저, Highcharts를 설치하고 설정하는 작업부터 시작해야 합니다. Highcharts는 CDN을 통해 제공되므로, HTML 파일의 <head> 섹션에서 다음과 같이 Highcharts 스크립트를 로드합니다.

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

또한, Highcharts 스타일 시트를 로드하기 위해 다음 코드를 추가합니다.

<link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css">

2. 스트림 그래프 데이터 준비

스트림 그래프는 시간에 따라 변화하는 데이터를 표현하므로, 적절한 데이터를 준비해야 합니다. 예를 들어, 시간대별로 사용자 수를 표시하는 스트림 그래프를 만든다고 가정해봅시다.

const data = [
  { time: '2021-01-01', users: 100 },
  { time: '2021-01-02', users: 120 },
  { time: '2021-01-03', users: 90 },
  // ... 이하 생략 ...
];

위와 같이 시간(time)과 사용자 수(users)를 가지고 있는 배열 형태의 데이터를 준비해야 합니다.

3. 스트림 그래프 생성

이제 준비한 데이터를 사용하여 스트림 그래프를 생성해보겠습니다. Highcharts에서는 chart 메소드를 사용하여 그래프를 생성하고, series 옵션을 통해 데이터를 지정할 수 있습니다.

Highcharts.chart('container', {
  chart: {
    type: 'streamgraph',
  },
  series: [{
    data: data,
    keys: ['time', 'users'],
  }],
});

위 코드에서 'container'는 그래프가 그려질 HTML 요소의 ID입니다. type 옵션을 'streamgraph'로 설정하여 스트림 그래프를 생성할 수 있습니다. series 옵션에서 데이터와 데이터 칼럼의 매핑을 설정합니다.

4. 스트림 그래프 스타일 및 옵션 설정

스트림 그래프의 색상, 축, 레이블 등 다양한 스타일과 옵션을 설정할 수 있습니다. 예를 들어, 아래와 같이 X축과 Y축의 레이블을 지정할 수 있습니다.

Highcharts.chart('container', {
  // ...
  xAxis: {
    title: {
      text: 'Date',
    },
  },
  yAxis: {
    title: {
      text: 'Number of Users',
    },
  },
  // ...
});

위 코드에서 xAxis와 yAxis 옵션을 사용하여 각각 X축과 Y축의 레이블을 설정했습니다.

5. 완성된 스트림 그래프 확인

HTML 파일에 Highcharts 스크립트를 로드하고 스트림 그래프를 생성한 뒤, 생성한 HTML 파일을 웹 브라우저에서 열어 확인해보세요. 이제 스트림 그래프가 정상적으로 표시되어야 합니다.

이제 Highcharts를 사용하여 스트림 그래프를 만드는 방법을 알게 되었습니다. 다양한 스타일과 옵션을 사용하여 원하는 대로 스트림 그래프를 커스터마이즈할 수 있습니다.

더 자세한 사용법과 옵션은 Highcharts 공식 문서를 참고하시기 바랍니다.

참고 문서

Highcharts 공식 문서