Vue + Chart.js 사용하기

화면에 chart를 넣어보자!

1. npm 하여 설치한다.

npm i vue-chartjs chart.js

2. 사용할 vue 파일에 LineChart.js를 import 시킨다.

import LineChart from '~/components/common/Chart/LineChart'

components: {
    LineChart,
  },

component 등록 잊지말기!, 그리고 템플릿에 사용한다.

<template> 
  <LineChart> </LineChart> 
</template>

3. LineChart.js 수정하기

import { Line, mixins } from 'vue-chartjs' //또는 'vue-chartjs/legacy'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted() {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  },
}

처음에 동료에게 파일을 전달 받았을 때에는 linechart.js 내에 직접 chartData와 options을 넣으셨는데, options이 먹히지 않아서 왜 그런지 이유를 찾다가 결국 처음 작업부터 잘못되었다는것을 알고 chart.js에 대해서 공부하기 시작했다.

Vue-chartjs 공식 사이트 (https://vue-chartjs.org/)

chart.js에서 작업하는 것이 아니라 작성하고있는 vue페이지에서 props로 넘겨주기 때문에 해당 페이지에서 data들을 작성하여 넘겨주어야 한다.

components를 사용하는 건 "기본 템플릿을 이용하여 다양하게 사용하는것"라고 생각하기 때문에 기본 템플릿 자체를 변경해버리면 component의 재사용성이 무의미 하다고 생각했다. 그래서 lineChart.js를 만들어 주고 부모 component에서 lineChart를 import하고 값을 데이터 바인딩 했다

중요하고 값이 변하는 정보들은 한곳에 모아두는것을 잊지말자!

4. component에 데이터바인딩을 해주자

<line-chart :options="options" :chartData="chartData"></line-chart>

chartData와 options값은 필수로 넘겨주어야 한다.

🚨 카멜케이스(camelCase) 로 props의 이름을 정한경우 Dom템플릿 안에서는 케밥케이스(kebab-case)를 사용하여야 올바르게 동작한다.

5. chartData 값 셋팅하기

chartData: {
        labels: ['4 / 8', '4 / 9', '4 / 10', '4 / 11', '4 / 12', '4 / 13', '4 / 14', '4 / 15', '4 / 16', '4 / 17'],
        datasets: [
          {
            borderWidth: 1, // 라인 넓이
            label: '총 수면 시간', // 데이터 라벨
            backgroundColor: 'rgb(255,255,255, 0)',
            pointBackgroundColor: '#64CCA2',
            fill: true, // 채우기
            // barPercentage: 1, 바 안쪽 넓이
            // categoryPercentage: 0.5, 바 외부 넓이
            tension: 0.1,
            borderColor: '#64CCA2',
            pointBorderColor: '#64CCA2',
            pointBorderWidth: 1,
            data: [45, 50, 60, 50, 45, 80, 50, 40, 68, 70],
          },
        ],
      },

6. options 값 셋팅하기

options: {
        scales: {
          xAxes: [
            {
              stacked: false, // 쌓임
              display: true, // x 축 show
              scaleLabel: {
                display: true,
                labelString: '날짜',
              },
              grid: {
                drawBorder: false,
                color: '#323232',
                lineWidth: 1,
              },
              ticks: {
                beginAtZero: true, // 0부터 시작
                padding: 0,
              },
            },
          ],
          // y축 옵션
          yAxes: [
            {
              stacked: false, // 쌓임
              display: true, // y 축 show
              ticks: {
                stepSize: 20, // 증가범위
                beginAtZero: true,
                max: 100, // 최대범위
                min: 0, // 최소범위
                padding: 10, // 오른쪽 간격
              },
              grid: {
                drawBorder: false,
                color: '#323232',
                lineWidth: 1,
              },
            },
          ],
        },
      },

Line Chart 보여주기 완성!

자세한 options이 정리된건 다음 사이트를 참고하였으나 사라짐 (23.07.20 수정)

https://velog.io/@rhak39/Vue-Chart.js-정리