vue-chartjs로 그래프 그리기

Vue.js에서 사용할 수 있는 몇 가지 그래프 그리기 라이브러리가 있지만 유명한 것은 모두 Chart.js의 래퍼 라이브러리입니다.
이번에는 그 중에서도 다기능 vue-chartjs를 사용해보기로 결정했습니다.

설치

설치는 vue-chartjs 외에 Chart.js도 필요합니다.

yarn add vue-chartjs chart.js

vue-chartjs의 공식 문서에는 Vue.js에서 사용하기 위해 필요한 최소한의 정보 만 있기 때문에,
그래프에 대해 더 자세히 알고 싶다면 Chart.js의 공식 문서를 살펴보십시오.

그래프 그리기

그래프 그리기는 간단합니다. 데이터를 정의, 혹은 API로 취득하는 등해 renderChart() 하는 것만.

Chart.vue

<script>
import { Bar } from 'vue-chartjs';

export default {
  extends: Bar,
  name: 'chart',
  data () {
    return {
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [
          {
            label: 'Bar Dataset',
            data: [10, 20, 30, 40, 50, 30],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
          },
          {
            label: 'Line Dataset',
            data: [10, 50, 20, 30, 30, 40],
            borderColor: '#CFD8DC',
            fill: false,
            type: 'line',
            lineTension: 0.3,
          }
        ]
      },
      options: {
        scales: {
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Month'
            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: true,
              stepSize: 10,
            }
          }]
        }
      }
    }
  },
  mounted () {
    this.renderChart(this.data, this.options)
  }
}
</script>

Index.vue

<template>
  <div>
    <h1>棒グラフと線グラフ</h1>
    <chart></chart>
  </div>
</template>

<script>
import Chart from './Chart';

export default {
  components: {
    Chart,
  },
}
</script>