[자바스크립트 + Chart.js] Radar Chart 만들기 (레이더 차트)

 

 

안녕하세요.

오늘은 자바스크립트와 Chart.js를 활용하여 Radar Chart를 만들어 보려고 합니다. 레이더 차트는 보통 제품이나 서비스들을 비교해야 하는 경우, 사람의 분석 능력 비교, 이상치를 식별해야 하는 경우 등에서 활용할 수 있습니다. 

저는 아직까지 레이더 차트를 사용해 본 적은 없지만 한 번쯤은 사용해보고 싶었기 때문에 이렇게 포스팅을 통해서라도 학습을 하고자 했습니다. 

차트 관련 라이브러리들은 사용법이 워낙 간단하고 데이터 세팅만 잘해준다면 어렵지 않기 때문에 한 번만 학습해 놔도 필요한 상황이 온다면 활용하기 좋을 것 같습니다.

 

 

레이더 차트

동일한 지점에서 시작하는 축에 표시된 3개 이상의 정량적 변수의 2차원 차트 형태로 다변량 데이터를 표시하는 그래픽 방법입니다. 차트의 형태는 거미줄처럼 생겼으며, 중심축에는 반지름이라고 하는 스포크가 세 개 이상 있습니다. 이러한 스포크에서 데이터 값이 매핑됩니다. 

 

그러면 Chart.js의 간단한 예제를 통해서 Radar Chart를 만들어 보도록 하겠습니다.

---

1. Radar Chart (레이더 차트)

import Chart.js

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

먼저 Chart.js로 예제를 만들기 위해 라이브러리를 import 시켜줍니다.

 

---

HTML canvas 요소 추가

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

html 영역에 차트를 생성해 주기 위해 canvas 태그를 추가해 줍니다. Chart.js는 canvas 요소를 기반으로 차트를 그리기 때문에 canvas 요소로 만들어 줘야 합니다. 그다음은 자바스크립트에서 해당 canvas 요소를 호출해 주기 위해 id값을 입력해 주면 됩니다. (자바스크립트에서 id가 아닌 class명이나 태그명으로 호출해 줘도 괜찮습니다)

---

자바스크립트 new Chart()

/**
 * Chart 설정 및 생성
 */
 new Chart(document.getElementById('radarChart'), {
    type: 'radar',
    data: {
        labels: [
            'data #1',
            'data #2',
            'data #3',
            'data #4',
            'data #5',
            'data #6',
        ],
        datasets: [
            {
                label: 'test 1',
                data: [160, 150, 176, 130, 141, 123],
            },
            {
                label: 'test 2',
                data: [120, 140, 186, 80, 131, 153],

            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: 'Radar Chart'
            }
        }
    }
});

라이브러리 import와 canvas 태그 추가가 됐다면 마지막으로 자바스크립트 영역에서 차트를 생성해주기 위한 설정을 해주면 됩니다. Chart.js에서 제공하는 new Chart() 함수를 호출을 해주면 되는데, 해당 함수에는 두 종류의 인자값을 기본으로 받고 있습니다. 첫 번째 인자값은 canvas 태그 요소이고, 두 번째 인자값은 어떤 차트를 만들지, 차트에 시각화할 데이터는 어떤 값인지 등 설정값에 대한 요소입니다.

---

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

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

위의 예시처럼 값을 세팅하면 됩니다.

canvas의 id값은 radarChart로 설정했기 때문에 document.getElementById('radarChart')를 첫 번째 인자값에,

생성하고자 하는 차트는 radar이기 때문에 두번째 인자값의 type을 'radar'로 설정합니다.

 

그러면 위의 예제 소스 코드를 실행해 보도록 하겠습니다.

---

실행 결과

위의 실행 결과처럼 두 종류의 데이터가 레이더 형태의 차트로 생성되었습니다. 이전에 포스팅했던 차트들과 데이터, 설정값은 거의 유사하며, 'type'값만 다르게 했는데 위처럼 아예 다른 시각화 차트가 완성되었습니다.

test1로 세팅한 데이터와 test2로 세팅한 데이터의 분포도에 따라 데이터의 성격과 차이 등 비교하기 좋을 것 같습니다.

 

 

반응형

---

마무리

오늘은 자바스크립트와 Chart.js를 활용하여 레이더 차트를 만들어 봤습니다. 소프트웨어 시스템을 개발하다 보면 텍스트, 테이블 등의 형태로 되어 있는 데이터를 보는 것보단 차트를 활용하여 시각화해서 보는 것이 훨씬 직관적이고 업무 효율이 좋습니다. 차트를 만드는 것은 어렵지 않고 종류도 다양하기 때문에 한 번씩만 예제를 따라서 구현해 봐도 스킬을 키우는데 많은 도움이 됩니다. 

 

 

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

 

 

---

* Chart.js 공식 사이트

https://www.chartjs.org/

Chart.js