Chart.js는 웹 기반 데이터 시각화를 위한 강력한 라이브러리입니다. 이 라이브러리를 사용하여 버블 차트를 손쉽게 생성할 수 있습니다.

버블 차트란?

버블 차트는 데이터를 점으로 표현하고, 점의 크기를 통해 추가적인 정보를 전달하는 차트입니다. 버블 차트는 세 가지 데이터를 사용하여 표현됩니다: 가로축 데이터, 세로축 데이터, 그리고 버블의 크기를 나타내는 데이터입니다.

Chart.js를 이용한 버블 차트 생성 과정

1. Chart.js 라이브러리를 HTML 문서에서 로드합니다. CDN을 이용할 수도 있고, 로컬에 다운로드하여 사용할 수도 있습니다.

   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   

2. <canvas> element를 HTML 문서에 추가합니다. 버블 차트가 그려질 공간입니다.

   <canvas id="bubble-chart"></canvas>
   

3. JavaScript 코드에서 Chart.js를 이용하여 버블 차트를 생성합니다.

   const data = {
     datasets: [{
       label: 'Sample Dataset',
       data: [
         { x: 10, y: 20, r: 30 },
         { x: 30, y: 40, r: 10 },
         { x: 50, y: 10, r: 20 },
       ],
       backgroundColor: 'rgba(75, 192, 192, 0.6)', // 점의 색상
       borderColor: 'rgba(75, 192, 192, 1)', // 점의 테두리 색상
     }]
   };
   
   const options = {
     scales: {
       x: {
         type: 'linear', // 가로축 타입 (optional)
         position: 'bottom' // 가로축 위치 (optional)
       },
       y: {
         type: 'linear', // 세로축 타입 (optional)
         position: 'left' // 세로축 위치 (optional)
       }
     }
   };
   
   const ctx = document.getElementById('bubble-chart').getContext('2d');
   const bubbleChart = new Chart(ctx, {
     type: 'bubble',
     data: data,
     options: options
   });
   

참고자료

• Chart.js 공식 문서