[javascript] Highcharts에서 거품 차트 만들기

27 Nov 2023

javascript

Highcharts는 JavaScript로 작성된 인기 있는 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 차트를 웹 페이지에 손쉽게 표시할 수 있습니다.

이번에는 Highcharts를 사용하여 거품 차트를 만드는 방법을 알아보겠습니다. 거품 차트는 데이터의 크기와 값을 동시에 시각적으로 표현하는 데 사용됩니다.

Highcharts 설치하기

먼저, Highcharts를 사용하기 위해 Highcharts 라이브러리를 설치해야 합니다. 아래의 명령을 사용하여 npm을 통해 라이브러리를 설치할 수 있습니다.

npm install highcharts

거품 차트 생성하기

Highcharts를 사용하여 거품 차트를 생성하려면 다음 단계를 따르면 됩니다.

HTML 파일에 Highcharts 라이브러리를 포함시킵니다.
차트를 표시할 컨테이너 엘리먼트를 HTML 파일에 추가합니다.
JavaScript 코드로 차트를 생성하고 데이터를 추가합니다.

다음은 거품 차트를 구현하는 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  <div id="container" style="width: 600px; height: 400px;"></div>

  <script>
    // 차트 데이터 설정
    const data = [
      { x: 1, y: 10, z: 5 },
      { x: 2, y: 15, z: 10 },
      { x: 3, y: 8, z: 3 },
      // 추가적인 데이터...
    ];

    // 차트 생성
    Highcharts.chart('container', {
      chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
      },
      title: {
        text: '거품 차트 예제'
      },
      xAxis: {
        title: {
          text: 'X 축'
        }
      },
      yAxis: {
        title: {
          text: 'Y 축'
        }
      },
      series: [{
        data: data
      }]
    });
  </script>
</body>
</html>

위의 코드에서는 div 엘리먼트에 id 속성을 지정하여 차트를 표시할 위치를 지정하고, Highcharts.chart 함수를 사용하여 차트를 생성하고 설정을 구성합니다. 차트 데이터는 data 배열에 객체로 표현되며, x, y, z 속성을 포함합니다. x는 x축 값, y는 y축 값, z는 데이터 포인트의 크기를 나타냅니다.

결과 확인하기

코드를 실행하면 거품 차트가 생성되고 웹 페이지에 표시됩니다. 차트의 축 레이블과 제목은 코드에서 설정한 값으로 표시됩니다. 데이터 객체의 x, y, z 속성에 따라 차트의 데이터 포인트의 위치와 크기가 결정됩니다.

이렇게 Highcharts를 사용하여 거품 차트를 만들 수 있습니다. 차트의 설정과 데이터를 변경하여 원하는 시각적 효과를 얻을 수 있습니다.

참고 자료

Highcharts 공식 문서