Chart.js는 JavaScript로 작성된 간단하고 유연한 차트 라이브러리이며, Vue.js는 사용자 인터페이스를 구축하기 위한 프로그레시브 프레임워크입니다. 이 두 가지 기술을 함께 사용하여 동적인 데이터 기반 차트를 만들 수 있습니다. 이 문서에서는 Chart.js와 Vue.js를 연동하는 방법을 다루겠습니다.
필요한 패키지 설치
먼저, Chart.js와 Vue.js를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.
npm install chart.js vue-chartjs
Vue 컴포넌트 생성
다음으로, Vue 컴포넌트를 생성해야 합니다. 차트를 표시할 컴포넌트를 만들기 전에 Chart.js와 vue-chartjs를 import 해야 합니다.
import { Bar } from 'vue-chartjs'
그런 다음, extends 키워드를 사용하여 VueChartJs 믹스인을 추가하고 Bar 차트를 확장하는 Vue 컴포넌트를 만듭니다.
export default {
extends: Bar,
mounted() {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data',
backgroundColor: '#f87979',
data: [40, 20, 30, 15, 25, 50, 35],
},
],
})
},
}
mounted 메서드는 컴포넌트가 렌더링된 후에 호출됩니다.
Vue 인스턴스 생성
마지막으로, Vue 인스턴스를 생성하여 컴포넌트를 마운트할 HTML 요소를 지정해야 합니다.
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: (h) => h(App),
}).$mount('#app')
위의 코드에서 #app은 차트를 보여줄 HTML 요소의 id입니다. 이 요소에 컴포넌트가 마운트됩니다.
차트 데이터 업데이트
차트 내용을 동적으로 업데이트하려고 할 때는, 데이터를 업데이트하고 update 메서드를 호출해야 합니다.
this.chartData.datasets[0].data = [10, 20, 30, 40, 50, 60, 70]
this.update()
위의 코드에서 chartData는 최초에 차트를 생성할 때 renderChart 메서드에 전달된 데이터입니다. 데이터를 업데이트한 후 update 메서드를 호출하여 차트를 다시 렌더링합니다.
결론
이제 Chart.js와 Vue.js를 연동하는 방법을 알아보았습니다. Vue 컴포넌트를 사용하여 차트를 만들고 업데이트할 수 있습니다. Chart.js의 다양한 차트 유형과 옵션을 사용하여 원하는 형태의 동적 차트를 만들어 보세요.