Ch.2 JavaScript 라이브러리 15선

Chart.js — 인터랙티브 차트

lightbulb

핵심 개념

Chart.js

웹에서 인터랙티브 차트를 만드는 JS 라이브러리


article

핵심 내용

데이터를 눈으로 보여주는 라이브러리, Chart.js를 만나보세요.

Chart.js = 숫자를 예쁜 차트로 바꿔주는 도구. 엑셀 그래프를 웹에서 마우스 호버까지 되게 만든다고 생각하면 됩니다.

매출 보고서를 만들 때, 엑셀 캡처 대신 살아있는 차트를 웹에 넣고 싶다면?

수동 방식: 엑셀에서 차트 만들고 → 스크린샷 찍고 → 이미지로 붙여넣기. 데이터 바뀌면 다시 처음부터.

Chart.js 코드: 숫자 배열만 바꾸면 차트가 자동 업데이트. 마우스 올리면 수치가 뜨고, 클릭하면 반응한다.

CDN 한 줄이면 설치 끝. HTML 파일 하나로 바로 차트를 그릴 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['1월', '2월', '3월'],
    datasets: [{
      label: '매출(만원)',
      data: [120, 190, 300]
    }]
  }
});

브라우저를 열면 3개의 막대가 나타납니다. 마우스를 올리면 '1월: 120'처럼 수치가 툴팁으로 뜹니다.

AI에게 차트를 만들어달라고 할 때, 구체적으로 요청하면 결과가 달라집니다.

좋은 프롬프트 예시: "Chart.js로 2024년 월별 매출 bar 차트를 만들어줘. 데이터는 [120, 190, 300, 250, 410, 380, 290, 350, 400, 450, 500, 620]. 최고 매출 달은 빨간색으로 강조해줘."

프롬프트 변형: "위 차트를 line 차트로 바꾸고, 목표 매출 300만원에 점선을 추가해줘. 목표 미달 구간은 배경을 연한 빨간색으로 칠해줘."

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['1월','2월','3월','4월','5월','6월',
             '7월','8월','9월','10월','11월','12월'],
    datasets: [{
      label: '매출(만원)',
      data: [120,190,300,250,410,380,290,350,400,450,500,620],
      borderColor: '#4BC0C0'
    }]
  },
  options: {
    plugins: {
      annotation: {
        annotations: {
          targetLine: {
            type: 'line', yMin: 300, yMax: 300,
            borderColor: 'red', borderDash: [5, 5],
            label: { content: '목표 300만원', enabled: true }
          }
        }
      }
    }
  }
});

카페 매출 대시보드를 만들어봅시다. 음료별 판매량을 pie 차트로 시각화합니다.

<!DOCTYPE html>
<html><head><title>카페 매출</title></head>
<body>
  <h2>오늘의 음료 판매량</h2>
  <canvas id="cafeChart" width="400" height="400"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    new Chart(document.getElementById('cafeChart'), {
      type: 'pie',
      data: {
        labels: ['아메리카노', '라떼', '녹차', '스무디', '에이드'],
        datasets: [{
          data: [45, 30, 12, 8, 5],
          backgroundColor: [
            '#8B4513', '#D2B48C', '#90EE90', '#FF6384', '#FFCE56'
          ]
        }]
      }
    });
  </script>
</body></html>

이 파일을 cafe.html로 저장하고 브라우저에서 열면 됩니다. 각 조각에 마우스를 올리면 음료 이름과 판매량이 표시됩니다.

Chart.js에서 차트를 생성할 때 반드시 전달해야 하는 3가지 설정은?

key

핵심 용어

📊

Chart.js

웹에서 인터랙티브 차트를 만드는 JS 라이브러리

대시보드

실시간 매출·방문자 수를 bar/line 차트로 시각화

보고서

분기별 실적을 pie 차트로 한눈에 비교

포트폴리오

프로젝트 기술 스택 비율을 도넛 차트로 표현

check_circle

핵심 정리

  • 1Chart.js는 CDN 한 줄로 설치하고, canvas 태그 하나로 차트를 그린다
  • 2bar, line, pie 등 다양한 차트 타입을 type 값 하나로 전환할 수 있다
  • 3마우스 호버 툴팁, 애니메이션이 기본 내장되어 있다
  • 4프롬프트에 차트 타입, 데이터, 강조 포인트를 명시하면 AI가 완성 코드를 준다

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작