[javascript] Highcharts에서 데이터 비교 차트 만들기

27 Nov 2023

javascript

Highcharts는 웹 기반 데이터 시각화 라이브러리로서, 다양한 형태와 스타일의 차트를 생성할 수 있습니다. 이번 포스트에서는 Highcharts를 사용하여 데이터 비교 차트를 만드는 방법에 대해 알아보겠습니다.

Highcharts 설치하기

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

npm install highcharts

또는 CDN을 사용하여 Highcharts를 로드할 수도 있습니다.

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

데이터 준비하기

데이터 비교 차트를 만들기 위해서는 비교할 데이터를 미리 준비해야 합니다. 아래는 예제 데이터입니다.

const data = [
  { category: 'A', value: 10 },
  { category: 'B', value: 15 },
  { category: 'C', value: 5 },
];

차트 생성하기

Highcharts를 사용하여 데이터 비교 차트를 생성하려면 다음과 같은 단계를 따릅니다.

컨테이너 엘리먼트 생성: 차트를 표시할 HTML 엘리먼트를 생성합니다.
```
<div id="chart-container"></div>
```

차트 옵션 설정: 차트의 스타일 및 레이아웃을 설정하는 옵션 객체를 생성합니다.

const chartOptions = {
  chart: {
    type: 'bar',
  },
  title: {
    text: '데이터 비교 차트',
  },
  xAxis: {
    categories: data.map(item => item.category),
  },
  yAxis: {
    title: {
      text: '값',
    },
  },
  series: [{
    name: '값',
    data: data.map(item => item.value),
  }],
};

차트 생성 및 표시: 컨테이너 엘리먼트와 옵션을 사용하여 차트를 생성하고 표시합니다.
```
const chart = Highcharts.chart('chart-container', chartOptions);
```

결과 확인하기

위 단계를 따라하고 HTML 파일을 실행하면 데이터 비교 차트가 표시됩니다. 차트는 선택한 형식에 따라 바, 라인 등 다양한 스타일로 표현될 수 있습니다.

Highcharts는 많은 차트 옵션과 기능을 제공하므로, 필요한 경우 공식 문서를 참조하여 더 많은 기능을 활용할 수 있습니다.

Highcharts 설치하기

데이터 준비하기

차트 생성하기

결과 확인하기

참고 자료