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

 

 

안녕하세요.

오늘은 자바스크립트와 chart.js를 활용해서 막대 차트와 라인 차트를 합쳐서 하나의 차트로 구현하는 방법을 포스팅하려고 합니다. 막대 차트와 라인 차트 만드는 방법은 지난번에 포스팅을 하였으니 아래 링크를 참고하시면 됩니다. :)

 

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

https://sancode.tistory.com/96

 

* 자바스크립트 chart.js 라인 차트 만들기 (line chart)

https://sancode.tistory.com/98

 

---

라인 + 막대 차트 예시 (Line + Bar)

chart.js 라이브러리 import

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

chart.js의 기능을 구현하기 위해 라이브러리를 import 시켜줬습니다. 

 

DOM canvas 요소 추가

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

html 영역에는 위와 같이 차트를 구현할 요소를 추가해 줬습니다. chart.js는 canvas 요소를 기반으로 차트를 그리기 때문에 위처럼 canvas 요소로 추가를 해주면 됩니다. 다음에 나올 자바스크립트 영역에서 canvas 요소를 호출해 주기 위해 id값을 설정해 줬는데 id가 아니더라도 호출만 가능하면 됩니다. 

 

new Chart() 설정

/**
 * Chart 설정 및 생성
 */
 new Chart(document.querySelector('.lineChart'), {
    data: {
        labels: ['2017', '2018', '2019', '2020', '2021', '2022'],
        datasets: [
            {
                type: 'bar',
                label: 'Bars',
                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,
            },
            {
                type: 'line',
                label: 'Lines',
                data: [10, 19, 17, 25, 23, 27],
                borderColor: '#ff8989',
                backgroundColor: '#ff8989',
            },
        ],
    },
    options: {
        responsive: true,
    }
 })

차트를 구현하기 위해 new Chart() 함수를 호출해 주면 됩니다.

 

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

* 첫 번째 인자값 : 차트를 구현할 canvas 요소
      - document.getElementById('lineChart')
* 두번째 인자값 : 구현할 차트의 설정 정보     
      - {             
             type: 'line',             
             data: { ... },             
             options: { ... }         
         }

함수를 호출하기 위해서 인자값을 넘겨줘야 하는데 위의 예시처럼 값을 세팅해주면 됩니다. 

차트의 유형이 하나인 경우에는 위의 예시처럼 두번째 인자값 하위에 type: 'line' 처럼 설정해 주면 되지만 오늘 구현할 예제에서는 예시와 다르게 설정을 해줘야 합니다. data 설정의 하위에서 datasets 별로 type을 설정해 주면 되는데요. 

datasets: [
    {
        type: 'bar',
        label: 'Bars',
        data: [10, 19, 31, 55, 23, 37],
        ...
    },
    {
        type: 'line',
        label: 'Lines',
        data: [10, 19, 17, 25, 23, 27],
        ...
    }
]

위의 예시처럼 데이터의 유형별로 type을 각각 주면 됩니다. 

그럼 위의 설정대로 실행한 결과를 보도록 하겠습니다.

---

실행 결과

위의 실행 결과처럼 막대 형태의 차트와 라인 형태의 차트가 하나의 차트상에 그려지게 됐습니다. 위의 예시처럼만 설정을 준다면 막대, 라인 차트 뿐만 아니라 다른 유형의 차트로 Mix도 가능하고, 두 개 이상의 여러 차트도 한번에 표현이 가능합니다.

위의 실행 결과를 보니 하나의 유형으로만 나타냈을 때 보다 활용도가 높아보이는 것 같습니다. :)

 

 

반응형

---

마무리

오늘은 자바스크립트와 chart.js를 활용하여 Mix된 차트를 만들어 봤습니다. 오늘 예시는 막대 차트와 라인 차트를 기준으로 합쳐봤는데 아직 예제가 두개밖에 없어서 준비를 못했습니다. 다음에는 조금 더 다양한 차트의 예제와 다양한 Mix 형태의 예제도 포스팅을 하도록 하겠습니다.

 

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

 

 

---

* Chart.js 공식 사이트

https://www.chartjs.org/