자바스크립트 Chart.js 바(Bar) 차트 만들기 (막대차트)

 

 

안녕하세요.

오늘은 Chart.js를 활용한 bar 형태의 차트를 만들어 보려고 합니다. Chart.js는 다양한 데이터의 시각화를 하기 위해 만들어진 오픈 소스 라이브러리입니다. 차트의 유형은 여러 가지가 있는데 오늘은 그중에서 Bar 유형의 차트를 만들어보려고 합니다. 점점 데이터의 양은 많아지고, 데이터의 분석을 위해 시각화를 많이 하기도 합니다. 그래서 많은 분들이 Chart.js와 같은 시각화 라이브러리를 많이 찾아주시는 것 같습니다. 저도 회사에서 몇 년째 데이터 시각화를 위한 차트 개발을 많이 하고 있습니다. 그래서 이렇게 간단한 기능부터 하나씩 포스팅을 해보려고 합니다. :) 

 

Bar 차트란 데이터를 막대 형식으로 시각화한 차트입니다.

 

그러면 예제를 통해 하나씩 보도록 하겠습니다.

---

1. Bar 차트 기본 예시

라이브러리 import

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

 

가장 먼저 chart.js 라이브러리를 import 시켜줍니다. 예제로 하다보니 간단하게 cdn 연동 방식으로 import 시켰습니다. 예제가 아닌 실제 업무에 적용해야 하는 경우에는 라이브러리를 직접 설치하셔서 import 시켜주는 것이 좋습니다. 

 

canvas 요소 추가

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

html 영역에서 canvas 태그를 생성하고 자바스크립트에서 호출할 수 있도록 id를 같이 추가해 줬습니다.

 

 

new Chart() 설정

<script>
/**
 * window document load 실행
 */
window.addEventListener('DOMContentLoaded', () => {

    /**
     * Chart 설정 및 생성
     */
    new Chart(document.getElementById('barChart'), {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: 'Colors',
                data: [10, 19, 31, 55, 23, 37],
                //borderWidth: 1
            }]
        },
    });
});
</script>

위의 예제처럼 new Chart() 함수에 생성할 차트 유형의 정보들을 파라미터로 세팅해 주면 됩니다. 위의 함수를 호출하는 방식의 파라미터는 크게 2개로 나뉘며, 첫 번째 인자는 html에서 차트를 그릴 DOM 요소, 두 번째 인자는 차트의 설정 object 정보입니다.

 

• 첫 번째 인자
  - 차트를 그릴 DOM 요소
• 두 번째 인자
  - type : 차트 유형 ('bar', 'line', 'pie'...)
  - labels : 데이터 별 기준이 되는 이름
  - datasets : 차트에 그려질 데이터 값 (data는 labels 값과 매핑)

---

실행 결과

실행 결과를 보게 되면 데이터 별로 막대 모양의 차트가 생성됐습니다. 소스 코드에서 추가한 labels의 배열값이 막대 하단부에 매핑이 되어 배치가 됐습니다. 

 

---

2. 데이터별 색상 변경 예시

/**
 * Chart 설정 및 생성
 */
new Chart(document.getElementById('barChart'), {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Colors',
            data: [10, 19, 31, 55, 23, 37],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 205, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(153, 102, 255, 0.2)',
            ],
            borderColor: [
                'rgb(255, 99, 132)',
                'rgb(255, 159, 64)',
                'rgb(255, 205, 86)',
                'rgb(75, 192, 192)',
                'rgb(54, 162, 235)',
                'rgb(153, 102, 255)',
            ],
            borderWidth: 1
        }]
    },
});

동일한 예제에서 데이터별로 색상을 추가해 줬습니다. 위의 예시 코드를 보게 되면 data의 배열 index에 맞춰 backgroundColor와 borderColor를 매핑시켜서 색상을 주면 됩니다.

 

labels - data - backgroundColor - borderColor 매핑

labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
data: [10, 19, 31, 55, 23, 37]
backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', ]
borderColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', ]

위처럼 인덱스에 맞춰 지정할 색상을 매핑시켜주면 됩니다.

---

실행 결과

데이터별로 색상을 추가했더니 훨씬 더 보기가 좋은것 같습니다. 데이터 특성에 따라 강조할 부분만 강조를 해줘도 되고, 위처럼 각각 다른 색상으로 구분시켜주기도 합니다.

 

 

반응형

---

3. Horizontal Bar 차트 예시

/**
 * Chart 설정 및 생성
 */
new Chart(document.getElementById('barChart'), {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Colors',
            data: [10, 19, 31, 55, 23, 37],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 205, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(153, 102, 255, 0.2)',
            ],
            borderColor: [
                'rgb(255, 99, 132)',
                'rgb(255, 159, 64)',
                'rgb(255, 205, 86)',
                'rgb(75, 192, 192)',
                'rgb(54, 162, 235)',
                'rgb(153, 102, 255)',
            ],
            borderWidth: 1,
        }],
    },
    options: {
        indexAxis: 'y'
    }
});

bar 차트는 기본적으로 X축을 기준으로 막대가 형성됩니다. 하지만 간단한 설정을 추가해 주면 Y축 기준으로 막대를 눕힐 수 있습니다. 위의 예시 코드를 보게 되면 파라미터 최하위에 options 설정을 추가해 줬습니다. 해당 설정에서 indexAxis: 'y'로 값을 추가해 준다면 간단하게 Y축 기준으로 눕힐 수 있습니다.

---

실행 결과

위의 실행 결과처럼 간단하게 bar 차트가 눕혀졌습니다. 

 

---

마무리

오늘은 chart.js를 활용한 bar 유형의 차트를 간단하게 만들어 봤습니다. chart 관련 라이브러리들은 대부분 유사하게 설정하는 방식이며, 라이브러리 한두 개만 사용해 봐도 다양한 라이브러리를 사용하는데 크게 지장이 없습니다! 물론 방식이 많이 다른 라이브러리도 있습니다!

하지만 대중적인 라이브러리들은 비슷비슷하더라구요~

오늘은 bar 유형의 차트를 기본적으로만 만들어봤고, 다음에는 조금 더 응용해서 예제를 만들어 보겠습니다.

 

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

 

 

---

* chart.js 공식 사이트

https://www.chartjs.org/docs/latest/

Chart.js | Chart.js