Chart.js + Vue.js 조합

[김종록]

**Chart.js + Vue.js** 조합에 대해 궁금하신 것 같아서 간단하게 정리해 드립니다.

---

# ✅ Chart.js 란?

* **JavaScript 기반의 차트 라이브러리**
* 막대 그래프, 선 그래프, 파이 차트 등 기본적인 차트를 매우 쉽게 만들 수 있음
* HTML `<canvas>` 태그에 그려짐
* 가벼움 + 사용법이 단순함 → 웹 프로젝트에서 가장 많이 쓰는 차트 라이브러리 중 하나

---

# ✅ Vue.js란?

* **프론트엔드 JavaScript 프레임워크**
* 화면(UI)을 컴포넌트 단위로 만들고, 데이터 변화에 따라 자동으로 화면이 갱신되도록 하는 프레임워크
* React, Angular 같은 프론트엔드 프레임워크의 한 종류

---

# 🔗 Chart.js 와 Vue.js 를 함께 사용하는 방법

Vue.js 프로젝트에서 Chart.js 를 사용하는 방법은 크게 두 가지입니다.

---

## ✔️ 1) Vue 컴포넌트 안에서 직접 Chart.js를 import 해서 사용

```javascript
import { Chart } from 'chart.js';

export default {
  mounted() {
    const ctx = document.getElementById('myChart');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['A', 'B', 'C'],
        datasets: [
          { label: 'Score', data: [10, 20, 30] }
        ]
      }
    });
  }
}
```

---

## ✔️ 2) Vue 전용 Wrapper 라이브러리 사용

Chart.js를 Vue에서 쉽게 쓰라고 만든 패키지입니다.

### ⭐ `vue-chartjs`

* Vue + Chart.js 통합용 라이브러리
* 차트를 Vue 컴포넌트 형태로 쓸 수 있어 훨씬 편해짐

예시:

```javascript
<template>
  <Bar :data="chartData" :options="chartOptions" />
</template>

<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, BarElement, CategoryScale, LinearScale } from 'chart.js'

ChartJS.register(BarElement, CategoryScale, LinearScale)

export default {
  components: { Bar },
  data() {
    return {
      chartData: {
        labels: ['A', 'B', 'C'],
        datasets: [{ data: [10, 20, 30] }]
      }
    }
  }
}
</script>
```

---

# 📌 정리

| 항목              | 설명                               |
| --------------- | -------------------------------- |
| **Chart.js**    | 차트 라이브러리(그래프 그리는 도구)             |
| **Vue.js**      | 프론트엔드 화면 프레임워크                   |
| **vue-chartjs** | Vue + Chart.js를 쉽게 연결해주는 Wrapper |

즉,

> **“Vue.js 프로젝트에서 차트를 그리고 싶을 때 Chart.js를 사용하고, 더 편하게 쓰려면 vue-chartjs를 사용한다.”**

이렇게 이해하시면 됩니다.

---

필요하시면 **설치 방법(명령어)**, **샘플 프로젝트 구조**, **Vue 2/3 각각 사용법**, **Chart.js 서버 필요 여부**도 설명해 드릴까요?