Ch.2 JavaScript 라이브러리 15선
Chart.js — 인터랙티브 차트
핵심 개념
Chart.js
웹에서 인터랙티브 차트를 만드는 JS 라이브러리
핵심 내용
데이터를 눈으로 보여주는 라이브러리, 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가지 설정은?
핵심 용어
Chart.js
웹에서 인터랙티브 차트를 만드는 JS 라이브러리
대시보드
실시간 매출·방문자 수를 bar/line 차트로 시각화
보고서
분기별 실적을 pie 차트로 한눈에 비교
포트폴리오
프로젝트 기술 스택 비율을 도넛 차트로 표현
핵심 정리
- 1Chart.js는 CDN 한 줄로 설치하고, canvas 태그 하나로 차트를 그린다
- 2bar, line, pie 등 다양한 차트 타입을 type 값 하나로 전환할 수 있다
- 3마우스 호버 툴팁, 애니메이션이 기본 내장되어 있다
- 4프롬프트에 차트 타입, 데이터, 강조 포인트를 명시하면 AI가 완성 코드를 준다
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작