[자바스크립트 + Chart.js] Pie 차트 예제 만들기 (Pie Chart, Doughnut Chart)

 

 

안녕하세요.

오늘은 자바스크립트와 Chart.js를 활용하여 Pie 모양의 차트와 Doughnut 모양의 차트를 만들어 보려고 합니다. 요즘 차트 만드는 것을 많이 하다 보니 계속 차트 관련 글을 작성하고 있는데요. 차트 만드는 게 처음에는 조금 어려운 것 같아도 하다 보면 시각적인 효과가 크다 보니 재미있기도 하고 배우는 것도 금방인 것 같아요!

지난번에는 막대 차트와 라인 차트를 만들었고, 오늘은 이어서 Pie와 Doughnut 차트를 만들려고 합니다. 두 모양 모두 원 모양으로 Pie는 피자 조각처럼 생겼고, Doughnut은 가운데가 뚫려있는 도넛의 모양을 하는 차트입니다. 이런 모양의 차트는 유사한 데이터의 비중을 서로 비교할 때 적절한 것 같아요! 

 

그럼 Pie 차트와 Doughnut 차트는 어떤식으로 구현되는지 예제를 통해서 하나씩 정리해 보도록 하겠습니다.

 

---

1. Pie Chart 예제

import Chart.js 

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

우선 Chart.js를 이용하기 위해 Chart.js를 연동해 줍니다. 저는 간단하게 구현하려고 cdn 방식으로 import를 시켜줬고, 라이브러리는 상황에 맞게 import를 시켜주면 될 것 같습니다.

---

DOM 요소 추가

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

다음은 html 영역에 차트를 만들기 위해 canvas 요소를 추가합니다. Chart.js는 기본적으로 canvas 요소 위에 차트를 생성하기 때문에 canvas로 생성해 주면 됩니다. 그리고 자바스크립트에서 해당 canvas를 호출하기 위해 id를 추가해 줬는데, 꼭 id값으로 주지 않더라도 class나 태그명으로 호출해도 괜찮습니다.

---

new Chart() 함수

/**
 * Chart 설정 및 생성
 */
 new Chart(document.getElementById('pieChart'), {
    type: 'pie',
    data: {
        labels: [
            'data #1',
            'data #2',
            'data #3',
            'data #4',
        ],
        datasets: [{
            label: 'My First Dataset',
            data: [200, 53, 150, 76],
            backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)',
                '#74e49c'
            ],
            hoverOffset: 4
        }]
    }
});

다음은 위에서 추가한 canvas 요소를 호출하고 new Chart() 함수를 통해 차트를 생성하면 됩니다. 

new Chart() 함수는 인자값을 크게 두가지를 받고 있습니다. 첫 번째 인자는 canvas 요소, 두 번째 인자는 생성하고자 하는 차트의 속성 정보입니다.

---

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

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

위와 같이 값을 세팅해 주면 됩니다. pie 차트로 구현하기 위해 type은 'pie'로 설정해 주고, 차트에 보일 데이터는 datasets 하위에 넣어주면 됩니다. 그리고 차트의 옵션값은 options에 추가해 주면 됩니다.

데이터는 간단하게 4종류, 값은 랜덤으로 아무 수로 입력해 넣었습니다.

그럼 위의 예제를 실행한 결과를 보도록 하겠습니다.

---

실행 결과

실행 결과는 원을 기준으로 data 값대로 비율을 나눠서 Pie 모양이 됐습니다. 피자 모양을 아무렇게나 잘라놓은 듯한 느낌입니다.

생각보다 설정한 값은 많이 없는데 위처럼 멋진 차트가 만들어 졌습니다. 정말 요즘에 나오는 라이브러리는 기능이 좋은 것 같아요.

그럼 다음은 Pie 차트와 유사한 Doughnut 모양의 차트 예제를 보도록 하겠습니다.

 

 

반응형

---

2. Doughnut Chart 예제

/**
 * Chart 설정 및 생성
 */
 new Chart(document.getElementById('pieChart'), {
    type: 'doughnut',
    data: {
        labels: [
            'data #1',
            'data #2',
            'data #3',
            'data #4',
        ],
        datasets: [{
            label: 'My First Dataset',
            data: [200, 53, 150, 76],
            backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)',
                '#74e49c'
            ],
            hoverOffset: 4
        }]
    }
});

Pie 차트의 예제 소스 코드에서 간단하게 type만 'doughnut'으로 변경해 줬고, data는 동일하게 입력해 줬습니다. 간단하죠?! Doughnut 모양의 차트는 어떻게 나오는지 바로 결과를 확인해 보도록 하겠습니다.

 

---

실행 결과

실행 결과는 정말 도넛 모양이 나왔습니다. 같은 데이터로도 type 변경만 해줘도 간단하게 형태를 바꿔줄 수 있습니다. 

 

---

3. Doughnut Chart Style

/**
 * Chart 설정 및 생성
 */
 new Chart(document.getElementById('pieChart'), {
    type: 'doughnut',
    data: {
        labels: [
            'data #1',
            'data #2',
            'data #3',
            'data #4',
        ],
        datasets: [{
            label: 'My First Dataset',
            data: [200, 53, 150, 76],
            backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)',
                '#74e49c'
            ],
            hoverOffset: 4,
            borderRadius : 10,
            spacing : 5,
        }]
    },
    options: {
        cutout: 120
    }
});

Doughnut 차트를 이용하다보면 도넛의 굵기나 스타일에 따라 느낌이 많이 달라집니다. 추가한 설정으로는 borderRadius, spacing, cutout 세 종류가 있습니다. 

borderRadius : 도넛 영역의 border의 각진 정도
spacing : 영역간의 간격
cutout : 내부의 비워진 영역의 비율

기본값으로 도넛 차트를 구현하면 데이터 영역 간에 딱 붙어있고, 영역별로 각지고 딱딱한 느낌이 있습니다. 위의 설정을 추가하면 한결 부드러운 느낌을 줄 수 있습니다. 실행 결과를 보도록 하겠습니다.

---

실행 결과

위의 실행 결과처럼 도넛의 스타일이 많이 부드러워 졌습니다. 

그리고 마지막 options값을 보게 되면 cutout 설정을 해줬는데 위의 실행 결과에서는 크게 차이가 없는 것 같습니다. 그래서 비교를 하기 위해 큰 값과 작은 값으로 줘봤습니다.

---

cutout 비교

좌측에는 cutout 180을 줬고, 우측에는 coutout 60을 줬습니다. 값의 차이를 크게하고 비교해 보니 확실히 차이가 큰 것 같습니다.

cutout 값은 비율값이며, 안의 공백을 크게 만들고 싶다면 값을 크게주면 되고, 안의 공백을 작게 만들고 싶다면 우측처럼 값을 작게 주면 됩니다.

 

---

마무리

오늘은 이렇게 자바스크립트와 Chart.js를 활용해서 Pie 차트와 Doughnut 차트를 만들어 봤습니다. 지난 글에 이어서 벌써 Pie 차트까지 만들어 봤는데요. 지난번에 만들어봤던 라인차트, 막대차트까지 포함하여 오늘 만들어본 Pie나 Doughnut 차트까지 함께 활용한다면 정말 다양한 시각화 화면을 구현할 수 있습니다. 물론 이 밖에도 훨씬 많은 유형의 차트 종류가 있습니다. 앞으로도 계속해서 차트 관련 예제를 만들어서 포스팅을 하도록 하겠습니다. :)

 

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

 

 

---

* Chart.js 공식 사이트

https://www.chartjs.org/

Chart.js

* 자바스크립트 chart.js 라인, 막대차트 만들기 (line + bar)

https://sancode.tistory.com/99

자바스크립트 chart.js 라인, 막대차트 만들기 (line + bar)