HTML, CSS

Chart.js ✅ Canvas로 손쉽게 데이터 시각화하는 방법

jonbeo 2025. 11. 1. 10:17
반응형

 

 

데이터를 직관적으로 보여주려면 시각화 도구가 필요합니다.
Chart.js는 가볍고 직관적인 API를 제공하여,
막대 그래프, 선 그래프, 원형 차트, 레이더 차트 등 다양한 차트를 쉽게 구현할 수 있습니다.

⚙️ 1. 설치 및 기본 세팅

설치

 
npm install chart.js

HTML 예시

 
<canvas id="myChart" width="400" height="200"></canvas>

JS 예시

 
import { Chart } from "chart.js";

const ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
  type: "bar", // 차트 타입
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple"],
    datasets: [{
      label: "투표 수",
      data: [12, 19, 3, 5, 2],
      backgroundColor: "rgba(75, 192, 192, 0.6)"
    }]
  }
});

📌 2. 주요 차트 타입

✅ 막대 그래프 (Bar Chart)

 
type: "bar"

✅ 선 그래프 (Line Chart)

 
type: "line"

✅ 파이 차트 (Pie / Doughnut)

 
type: "pie"
type: "doughnut"

✅ 레이더 차트

 
type: "radar"

 

👉 하나의 라이브러리로 대부분의 기본 차트 구현 가능

🎨 3. 스타일 옵션

 
options: {
  responsive: true,
  plugins: {
    legend: {
      position: "bottom" // 범례 위치 변경
    },
    title: {
      display: true,
      text: "Chart.js 예제 차트"
    }
  }
}

 

📌 차트는 반응형 지원, 범례/제목/툴팁 커스터마이징 가능

⚡ 4. 실무 활용 팁

  • ✅ 관리자 대시보드, 매출 통계, 사용자 분석 데이터 시각화에 활용
  • ✅ 색상 팔레트는 브랜드 컬러에 맞게 커스터마이징
  • ✅ 데이터가 많을 경우 → pagination 또는 lazy loading 적용
  • ✅ 고급 인터랙션 필요 → D3.js, ECharts 고려

📝 마무리 정리

  • Chart.js = 간단 + 직관적 + 빠른 차트 구현
  • 기본 차트(Bar, Line, Pie, Radar 등)는 대부분 지원
  • 반응형 옵션과 커스터마이징을 잘 활용하면 실무에서도 충분히 강력
  • 복잡한 데이터 시각화는 D3.js 같은 고급 라이브러리와 비교하여 선택
반응형