[자바스크립트 + Chart.js] 폴라 차트 (Polar Chart) 만들기

 

 

안녕하세요.

오늘은 자바스크립트와 Chart.js를 활용하여 Polar Chart를 만들어 보려고 합니다. Polar Chart란 원형에서 각 축과 반경축을 사용하여 시각화하는 차트입니다. 지난번 포스팅의 파이 차트와 유사하면서 다른 느낌의 차트입니다. 어떻게 다른지 예제를 통해서 알아보고 파이 차트와 비교까지 해보도록 하겠습니다.

 

---

1. Polar Chart 예제

import Chart.js

<!-- Chart.js 라이브러리 import -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

우선 Chart.js 라이브러리를 cdn 방식을 통해 연동해 줬습니다.

---

HTML canvas 요소 추가

<div>
    <!-- Chart 영역 -->
    <canvas id="polarChart"></canvas>
</div>

다음은 HTML 영역에 canvas 태그 요소를 추가해 줍니다. Chart.js는 canvas를 기반으로 차트를 그리기 때문에 반드시 canvas 태그로 생성해 줘야 하며, 자바스크립트에서 canvas를 호출할 값은 id로 설정해 줬는데, 태그명이나 class명으로 입력해 줘도 괜찮습니다.

---

 new Chart() 함수 추가

/**
 * Chart 설정 및 생성
 */
 new Chart(document.getElementById('polarChart'), {
    type: 'polarArea',
    data: {
        datasets: [{
            data: [33, 87, 60, 16, 53],
            backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)',
                '#74e49c',
                '#b061f5',
            ],
        }]
    }
 });

마지막으로 new Chart() 함수를 호출하는 자바스크립트 영역입니다. 위에서 설명했듯이 canvas를 호출하기 위해 자바스크립트를 이용해서 document.getElementById()로 id값을 불러줬습니다. 

new Chart() 함수에서는 두 종류의 인자값을 받고 있으며, 첫 번쨰 인자값은 canvas 요소 정보, 두 번째 인자값은 차트 유형 정보를 넣어주면 됩니다.

---

new Chart(인자값1, 인자값2) 설명 및 예시

* 인자값1 : 차트를 구현할 canvas 요소
       예시 : document.getElementById('pieChart')
* 인자값2 : 생성하고자 하는 차트의 속성 정보       
       예시 : {                     
                     type: 'polarArea',                     
                     data: { ... },                     
                     options: { ... },                 
                 }

위의 설명 예시와 같이 설정값을 추가해주면 되는데, 오늘 만들 예제는 polar 차트이기 때문에 type 값은 'polarArea'로 설정해 주면 됩니다.

그럼 실행 결과를 확인해 보도록 하겠습니다.

---

실행 결과

실행 결과는 위와 같이 원형 기준으로 데이터별로 데이터의 크기만큼 영역을 나타내는 차트가 구현됐습니다. 결과 화면을 보면 대충 polar Chart가 어떤 느낌인지 알 것 같네요! 

 

 

반응형

---

2. Pie Chart와 Polar Chart 비교하기

좌측은 일반 Pie Chart이고, 우측은 Polar Chart입니다. 이렇게 결과 화면을 놓고 보니 원형인 것만 뺴고는 아예 다른 시각화 차트인 것 같아요! 데이터의 성격에 따라 시각화 용도가 아예 다를 것 같습니다. :)

 

---

마무리

 오늘은 자바스크립트와 Chart.js를 활용해서 Polar Chart를 만들어 봤습니다. 일반적인 차트에 비해서 Polar Chart는 많이 생소한 것 같습니다. 결과 화면을 보면 가끔 웹을 돌아다니다 보면 봤던 기억이 있지만 실제 업무를 보면서 아직까지 만들어 본 기억은 없었기 때문에 이번에 한번 만들어 봤는데 구현도 쉽고 활용할 곳이 많을 것 같네요! 

당장 쓸 곳은 없지만 예제를 통해 한번씩 해본 경험만 있어도 나중에 정말 큰 도움이 됩니다! 그러니 꼭 예제를 통해 간단하게라도 구현을 해보시는 것을 추천드립니다. :)

 

그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.

 

 

---