[Vue] Chart.js 사용법

박태규·2022년 11월 15일

vue

시작

회사에서 Chart.js를 사용하여 금융 데이터 시각화 부분을 개발했었다.
경험을 바탕으로 Vue에서 Chart.js를 처음 사용하는 분들을 위해 글을 작성해 보겠다.

Chart.js를 사용한 이유?

처음 시각화했을 때 Plotly.js를 사용하여 개발을 했었다.

Plotly.js도 문서화가 굉장히 잘 되어있고 예제 샘플을 보면 금방 만들 수 있다. (파이썬 matplotlib을 사용하여 시각화를 해본 사람이라면 굉장히 친숙함을 느낄 수 있음)

본론으로 와서 Chart.js를 사용하기 전 사람들이 왜 많이 사용할까?를 생각해 보았다. (같은 팀 리더님의 권유로 사용하게 되었지만 그래도 왜 쓰는지는 알아야 되니…)

npm

일단 npm에 들어가가서 확인 해보자

Version History를 확인해 보면 Chart.js는 65만 다운로드가 있는 것을 확인할 수 있고 Plotly.js는 1만 건 정도의 다운이 있는 것을 확인할 수 있다. 이것만 확인해도 인기 있는 건 Chart.js인 걸 알 수 있다. 또한 Unpacked Size도 Plotly.js는 60M인 반면 Chart.js는 3M 정도로 Plotly.js보다 훨씬 가볍다.
Chart.js Version History

plotly.js Version History

Chart.js 장점

Chart.js는 SVG로 렌더링 되는 대부분 D3.js 기반 차트 라이브러리와 달리 HTML5 캔버스에서 차트 요소를 렌더링 한다. 이로 인해 성능이 다른 라이브러리 보다 훨씬 뛰어나다.

성능이 뛰어난 이유는 Chart.js가 사용하는 캔버스 렌더링은 SVG 렌더링과 비교하여 DOM 트리의 비용을 줄이기 때문이다.

또한 Vue js와도 호환이 되어 편하다. + 공식 문서가 잘 돼있음

이제 Chart.js 직접 사용해보자!

Chart.js 사용

(Vue 2버전) (chart.js 3.9.1버전) (vue-chartjs 4.1.2버전) 사용

https://vue-chartjs.org/ 참고

1. npm 다운

먼저 chart.js와 chart.js에 래핑 된 vue-chart.js를 다운받자

npm i vue-chartjs chart.js

2. chart 컴포넌트 만들기 + 재사용

공식 문서를 따라 하면 쉽게 만들 수 있지만 나는 차트를 여러 컴포넌트에 사용하기 때문에 재사용 가능하게 만들었다.

아래와 같이 필요한 요소를 import하고, 작업할 때 데이터를 LineChart.vue쪽으로 넘겨주기 때문에 props를 설정하자

// components/chart/LineChart.vue 

<script>
import { Line } from 'vue-chartjs/legacy' // 2버전 
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
} from 'chart.js'

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement
)
// import { Chart, registerables } from 'chart.js'
// Chart.register(...registerables)

export default {
  extends: Line,
  props: {
    chartData: {
      type: Object,
    },
    options: {
      type: Object,
    },
		width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
  },
}
</script>

만약 LineChart말고 다른 차트를 만든다면 어떻게 해야 할까?

먼저 register에 플러그인을 등록해야 하는데 어떤 요소를 등록해야 하는지 몰랐다.

그래서 공식 사이트를 뒤적였지만 이 정보를 찾기 어려웠다.

그럼 어떻게 할까?

방법 1

모든 registerables를 등록함 이게 제일 깔끔함 (근데 난 만약 사이즈가 큰 라이브러리를 import한다면 로딩에 제한을 받을 수 있기 때문에 이렇게 하진 않았음)

import { Chart, registerables } from 'chart.js'
Chart.register(...registerables)

방법 2.

하나하나씩 찾기
Title, Tooltip, Legend, 이 3개는 defalut로 있어야 하는것 같다.

import { Doughnut } from 'vue-chartjs/legacy'
import { Chart as ChartJS, Title, Tooltip, Legend } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend)
export default {
  extends: Doughnut,
  props: {
    chartData: {
      type: Object,
    },
    chartOptions: {
      type: Object,
    },
  },
}

만약 도넛 차트를 그리고 싶다면 일단 이렇게 작성 후에 실행을 시켜보면 보자(사용할 컴포넌트에 등록 후 실행) 그러면 아래와 같은 에러를 만난다.
사진을 보면 register에 arc가 없다고 나온다.

arc를 등록해야 한다. 방법은 공식 문서에 가서 찾으면된다.
https://www.chartjs.org/docs/3.9.1/getting-started/integration.html

arc가 없다고 했으니까 밑줄 친 부분을 추가해 주면 된다. 이렇게 하나씩 부족한 걸 채워 넣어주면 어느 순간 에러가 사라지고 차트가 출력되는 걸 볼 수 있다.

3. 컴포넌트에 차트 컴포넌트 붙이기

아래와 같이 LineChart를 불러오고 사용하고 싶은 컴포넌트에 사용하면 된다.

1.필요한 데이터와 옵션 세팅

chartData: {
        labels: ['January','February','March','April','May','June','July'],
        datasets: [
          {
            label: 'Data ne',
            backgroundColor: '#f87979',
            data: [40, 39, 10, 40, 39, 80, 40],
            borderColor: 'red',
          },
        ],
      },
chartOptions: { responsive: true, },

2.데이터 바인딩

데이터 바인딩을 아래와 같이 하자 원하는 width, height값을 설정하고 데이터를 바인딩 하면 LineChart.vue로 데이터가 이동하여 차트가 그려지게 된다. (props값을 아래 예시와 같이 안 해주면 vue 내부에서 인식을 못함 꼭 예시와 같이 작성할 것)

<line-chart
   :chartData="chartData"
   :chartOptions="chartOptions"
   :width="100"
   :height="50"
 ></line-chart>

4. LineChart 완성

전체 코드

// components/DashBoard.vue
<template>
  <div class="row">
    <div class="col-10">
      <line-chart
        :chartData="chartData"
        :chartOptions="chartOptions"
        :width="100"
        :height="50"
      ></line-chart>
    </div>
  </div>
</template>
<script>
import LineChart from './chart/LineChart.vue'
export default {
  name: 'DashBoard',
  components: { LineChart },
  data() {
    return {
      chartData: {
        labels: ['January','February','March','April','May','June','July'],
        datasets: [
          {
            label: 'Data ne',
            backgroundColor: '#f87979',
            data: [40, 39, 10, 40, 39, 80, 40],
            borderColor: 'red',
          },
        ],
      },
      chartOptions: { responsive: true,},
    }
  },
}
</script>