[javascript] Highcharts에서 감마 차트 만들기

27 Nov 2023

javascript

Highcharts는 데이터 시각화 라이브러리로서 다양한 종류의 차트를 생성할 수 있습니다. 이번에는 Highcharts를 사용하여 감마 (gamma) 차트를 만들어 보도록 하겠습니다.

Highcharts 설치

먼저, Highcharts를 사용하려면 해당 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 Highcharts를 설치하세요.

npm install highcharts

HTML 파일 작성

다음으로, Highcharts를 사용하여 감마 차트를 그릴 HTML 파일을 작성해야 합니다. 다음과 같이 HTML 파일을 작성하세요.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Gamma Chart</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  <div id="container" style="min-width: 300px; height: 300px; margin: 0 auto"></div>

  <script>
    // Highcharts를 사용하여 감마 차트를 그립니다.
    Highcharts.chart('container', {
      title: {
        text: 'Gamma Chart'
      },
      xAxis: {
        categories: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {
        title: {
          text: 'Values'
        }
      },
      series: [{
        name: 'Gamma',
        data: [3, 5, 2, 6, 4]
      }]
    });
  </script>
</body>
</html>

위 코드에서 Highcharts.chart 함수를 사용하여 감마 차트를 정의하고 그릴 수 있습니다. categories 배열에는 x축에 표시될 카테고리를 지정하고, data 배열에는 각 카테고리에 해당하는 y값을 지정합니다.

실행 결과

위의 HTML 파일을 브라우저에서 실행하면 다음과 같이 감마 차트가 그려집니다.

Gamma Chart

위의 예제에서는 감마 차트의 x축에는 A, B, C, D, E라는 카테고리가 있고, 각 카테고리에 해당하는 y값으로는 3, 5, 2, 6, 4를 사용했습니다.

더 많은 옵션

Highcharts는 다양한 옵션을 제공하여 차트의 모양과 스타일을 변경할 수 있습니다. 자세한 내용은 Highcharts 공식 문서를 참조하세요.