Vue 및 TypeScript와 함께 Chart.js를 사용하는 방법

최근에 나는 Chart.js 라이브러리를 가지고 놀았고 그것을 내 Vue 애플리케이션 중 하나에 통합했습니다. Vue 및 TypeScript와 함께 Chart.js를 사용하는 일부 래퍼 라이브러리가 있더라도 내 Vue 프로젝트에 통합하는 데 문제가 있었습니다. 이 블로그 게시물에서는 일반 Chart.js 라이브러리를 사용하여 Vue에서 자신만의 차트 구성 요소를 만드는 방법을 보여드리고자 합니다.

요구 사항

Vue 프로젝트

Vue 클래스 구성 요소

Vue 속성 데코레이터

설치

먼저 Vue 애플리케이션에 다음 패키지를 추가합니다.

$ yarn add chart.js @types/chart.js

이러한 패키지가 설치되면 구성 요소 디렉토리 내에 새 차트 폴더와 해당 차트 구성 요소를 만듭니다.

$ mkdir src/components/charts
$ touch src/components/charts/Doughnut.vue

Donut.vue 파일에 다음 콘텐츠를 추가합니다.

<template>
  <canvas id="doughnut" />
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Chart from 'chart.js'

@Component
export default class Doughnut extends Vue {
  @Prop({ default: [] }) readonly labels!: Array<string>
  @Prop({ default: [] }) readonly colors!: Array<string>
  @Prop({ default: [] }) readonly data!: Array<number>
  @Prop({
    default: () => {
      return Chart.defaults.doughnut
    }
  })
  readonly options: object | undefined

  mounted() {
    this.createChart({
      datasets: [
        {
          data: this.data,
          backgroundColor: this.colors
        }
      ],
      labels: this.labels
    })
  }

  createChart(chartData: object) {
    const canvas = document.getElementById('doughnut') as HTMLCanvasElement
    const options = {
      type: 'doughnut',
      data: chartData,
      options: this.options
    }
    new Chart(canvas, options)
  }
}
</script>

보시다시피 차트 데이터 및 구성에 대한 속성을 선언하고 있습니다. 이렇게 하면 구성 요소를 재사용할 수 있고 다른 구성 요소의 값을 주입할 수 있습니다.

이제 생성된 Donut 컴포넌트를 가져와서 사용할 수 있습니다. 이 예에서는 구성 요소가 새 Vue 프로젝트의 홈 보기에 추가되었습니다.

<template>
  <div class="home">
    <Doughnut
      :data="[25, 75, 30]"
      :labels="['Red', 'Green', 'Blue']"
      :colors="['red', 'green', 'blue']"
    />
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

마지막으로 Vue 개발 서버를 시작하고 관련 주소에서 브라우저를 열어 결과를 확인합니다.