Vue에서 Chart.js만 사용하는 방법

vue-chart.js와 같은 vue에서 chart.js를 쉽게 사용할수있는 라이브러리가 있지만 chart.js를 그대로 사용하는게 

react와같은 프레임워크가 다른 곳에서도 사용하기 좋을꺼같아 chart.js만 사용하여 데이터를 만들어 보았다.

 

1. 설치방법

npm i chart.js

 

2. 이용 순서

 

2-1. vue 파일 생성

2-2. chart.js를 import 

2-3. 차트를 그리기 위해 canvas태그를 생성

2-4. 차트를 만들기 위한 데이터, 함수 생성

 

 

2-1. vue 파일생성

 

BarChart2.js 라는 bar차트를 생성한다.

<template>
  <div>
    bar chart
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

 

2-2. chart.js import

chart.js가 오래되어 지난 버전을 설명하시는 블로그가 있지만 3.6버전에서는 오류를 발생시킨다.

3.6.0 버전 이상에서 chart.js에서 import 방법이 추가가 되었다. 방법이 여러개 이고 공식 홈페이지에서 확인 할 수 있다.

나는 모든 차트를 간편하게 불러 올 수 있는 registerables를 이용한 import를 사용 할 것이다.

<template>
  <div>
    bar chart
  </div>
</template>

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

export default {

}
</script>

<style>

</style>

 

2-3. 차트를 그리기 위해 canvas 태그 생성

div에 들어간 barchart는 지워주고 canvas 태그를 넣어준다.

canvas태그는 js를 이용하여 그래픽 콘텐츠를 그릴때 사용한다.

html같은 경우 id canvas태그에 id 또는 class 이름을 넣어  (getelementbyid, getelementbyclass) 사용하지만

vue에서는 같은 기능으로 refs가 지원이니 refs를 사용한다. 

ref 이름은 barChart로 설정한다.

<template>
  <div>
    <canvas
      ref="barChart"
    />
  </div>
</template>

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

export default {

}
</script>

<style>

</style>

 

2-4. 차트를 만들기 위한 데이터, 함수 생성

*chart.js 홈페이지에 있는 예시 그대로 데이터와 옵션을 사용 할 예정이다.

 

2-3 에서  Chart를 임포트 한 것을  new Chart()로 차트가 만들어진다.

함수가 바로 실행되기 위해 mounted에 만든 함수를 넣어준다.

 

data 부분이 필요 없이 너무 길어 vscode에 접기를 사용하여 캡쳐함

 

<template>
  <div>
    <canvas
      ref="barChart"
    />
  </div>
</template>

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

export default {
  data:() => ({
    type: 'bar',
    data: {
      labels: [ 'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange' ],
      datasets: [{
        label: '# of Votes',
        data: [ 12, 19, 3, 5, 2, 3 ],
        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
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  }),
  mounted(){
    this.createChart()
  },
  methods:{
    createChart(){
      new Chart(this.$refs.barChart, {
        type:'bar',
        data:this.data,
        options:this.options
      })

    }
  }
}
</script>

 

 

 

 

 

태그를 생성태그를 생성