Vue | Chart.js 를 활용하여 차트 넣기

 

저는 YARN 을 사용하고 있기 때문에 yarn 으로 설치를 해줬습니다. 

yarn add vue-chartjs chart.js

 

 

 

차트를 띄우려고 하는 vue 파일에 적용하면 됩니다. 

 

<template>
  <Bar
    id="my-chart-id"
    :options="chartOptions"
    :data="chartData"
  />
</template>

template 에는 필요한 부분을 

 

 

Bar 형태의 차트 기준입니다. 

import { Bar } from 'vue-chartjs'

import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

그 이후에 차트에 대한 정보를 넣어줍니다. 

  data() {
    return {
      chartData: {
        labels: [
          'January', 'February', 'March'
        ],
        datasets: [
          {
            label : "일별",
            backgroundColor : "#8cc4ff",
            data: [40, 20, 12]
          }
        ]
      },
      chartOptions: {
        responsive: true
      }
    }
  },

 

 

그럼 이런 형태의 차트가 출력됩니다. 

 

 

 

참고 사이트 

https://vue-chartjs.org/examples/

Examples | 📈 vue-chartjs

 

그 외에 다양한 차트들이 있으니 

예시를 보고 원하는 형태를 적용하면 됩니다.