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

 

 

안녕하세요.

오늘은 자바스크립트와 chart.js를 활용한 Line Chart를 만들어 보려고 합니다. Line Chart는 말 그대로 라인 형태의 시각화 차트입니다. Line Chart는 보통 날짜, 시간 기준으로 해서 데이터의 변화하는 과정은 라인으로 이어서 볼 때 효과가 좋습니다. 그 외에도 기준만 잘 잡아준다면 데이터의 흐름을 파악하는데 활용도가 정말 높습니다. 정말 간단하면서도 활용도 높은 Line Chart를 하나씩 배워보도록 하겠습니다.

 

---

1. Line Chart 기본 예시

chart.js 라이브러리 import

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

chart.js를 사용하기 위해 위와 같이 chart.js 라이브러리를 import 시켜줍니다. 저는 간단하게 cdn 방식으로 연동을 하였고, 상황에 따라 직접 설치하여 import 시켜도 됩니다.

 

DOM canvas 요소 추가

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

Line Chart를 그리기 위해 chart.js에서는 canvas 태그를 사용해야 합니다. 위와 같이 html에 canvas 태그를 추가하고 자바스크립트에서 해당 태그를 호출하기 위해 Id값도 같이 설정해 줬습니다. 

 

new Chart() 함수

/**
 * Chart 설정 및 생성
 */
 new Chart(document.getElementById('lineChart'), {
    type: 'line',
    data: {
        labels: ['2017', '2018', '2019', '2020', '2021', '2022'],
        datasets: [
            {
                label: 'Dataset #1',
                data: [10, 19, 17, 25, 23, 27],
                borderColor: '#ff8989',
                backgroundColor: '#ff8989',
            },
            {
                label: 'Dataset #2',
                data: [5, 14, 13, 15, 20, 17],
                borderColor: '#64a849',
                backgroundColor: '#64a849',
            },
        ],
    },
    options: {
        responsive: true,
    }
 })

chart.js의 new Chart() 함수를 이용해서 구현할 차트의 설정값을 맞춰서 넣어줬습니다. 

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

위와 같이 구현할 차트의 설정값에 맞춰서 값을 입력해 주면 됩니다.

 

---

실행 결과

 

---

1. Interpolation 보간 설정 예시

차트상에서 Interpolation은 라인을 부드럽게 만들어주는 개념입니다. 위의 예시처럼 라인 차트는 기본적으로 꼭짓점 기준으로 꺾여있는 형태인데 Interpolation 설정을 주게 되면 라인이 부드럽게 바꿔줄 수 있습니다.

 

Interpolation 설정 추가

{
    label: 'Dataset #1',
    data: [10, 19, 17, 25, 23, 27],
    borderColor: '#ff8989',
    backgroundColor: '#ff8989',
    cubicInterpolationMode: 'monotone',
},

첫번째의 dataset 라인 설정만 Interpolation 설정을 추가해 줬습니다.

cubicInterpolationMode: 'monotone'

위의 설정만 추가해 주면 라인이 부드럽게 변경됩니다.

---

실행 결과

위의 실행 결과처럼 첫 번째 라인은 꼭짓점 기준으로 부드럽게 변경됐습니다. Interpolation을 설정하지 않은 두 번째 라인과 확실히 차이가 있습니다.

전체적인 흐름을 보고자 할때에는 Interpolation설정을 해준 첫 번째 라인처럼 나타내면 좋을 것 같고,

지점별로 확실하게 강조할 때에는 두번째 라인처럼 나타내는 것이 좋을 것 같습니다. 물론 개인적인 생각입니다! 

 

 

반응형

---

3. Point 강조 예시

라인 차트를 구현하다 보면 라인의 각 지점마다 강조될 수 있도록 스타일을 수정해줘야 할 경우가 있습니다. 그럴 때 point 스타일을 변경하는 예시입니다.

 

Point Style 설정 추가

{
    label: 'Dataset #2',
    data: [5, 14, 13, 15, 20, 17],
    borderColor: '#64a849',
    backgroundColor: '#b4dfa270',
    pointStyle: 'circle',
    pointRadius: 10,
    pointHoverRadius: 15
},

위의 예시 코드를 보게 되면 point 스타일을 변경해 주는 설정을 추가해 줬습니다. 

* pointStyle : 포인트의 형태
 ('circle', 'cross', 'crossRot', 'dash', 'line', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle', false)
* pointRadius : 포인트의 반지름 수치
* pointHoverRadius : 포인트에 마우스를 올렸을 때의 반지름 수치 

---

실행 결과

위의 실행 결과처럼 두번째 라인을 보게 되면 지점(point) 별로 설정한 스타일 값대로 변경된 모습입니다. 지점을 강조해 줘야 할 경우에 설정을 추가해 주면 좋을 것 같습니다.

 

---

마무리

오늘은 자바스크립트와 chart.js를 활용하여 라인 차트를 만들어 봤습니다. 자바스크립트에서 차트를 구현하는 것은 처음에 데이터를 만들고 차트 유형에 맞춰 설정값을 주는 게 귀찮은데 기본값을 맞춰놓고 나면 형태를 바꿔가는 것은 대부분 간단할 설정을 추가하는 방식이라 다양한 형태로 바꿔주는 것은 크게 어렵지 않습니다! 물론 가끔은 까다로운 형태의 차트도 있어서 간단한 설정으로 구현이 힘든 경우도 있습니다. :)

 

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

 

 

---

* chart.js 공식 사이트

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

Chart.js | Chart.js