레슨 8 / 8·15분
Chart.js 레퍼런스
차트 타입 총정리
- •bar — 막대 차트 (수직/수평)
- •line — 선 차트 (영역 채우기 가능)
- •pie — 파이 차트
- •doughnut — 도넛 차트
- •radar — 레이더 차트
- •polarArea — 극좌표 영역 차트
- •bubble — 버블 차트 (x, y, r)
- •scatter — 산점도 차트 (x, y)
설정 객체 구조 레퍼런스
javascript
// Chart.js 설정 객체 전체 구조
var config = {
type: 'bar', // 차트 타입
data: {
labels: [], // X축 라벨 배열
datasets: [{
label: '', // 데이터셋 이름
data: [], // 데이터 배열
type: '', // 복합 차트용 개별 타입
backgroundColor: '', // 채우기 색상
borderColor: '', // 테두리 색상
borderWidth: 1, // 테두리 두께
fill: false, // 영역 채우기 여부 (line)
tension: 0, // 곡선 정도 (line, 0~1)
pointRadius: 3, // 포인트 크기 (line)
borderRadius: 0, // 막대 모서리 둥글기 (bar)
order: 0, // 그리기 순서 (복합 차트)
yAxisID: 'y', // 사용할 Y축 ID
hidden: false, // 초기 숨김 여부
}],
},
options: {
responsive: true,
maintainAspectRatio: true,
indexAxis: 'x', // 'y'로 설정하면 수평 막대
plugins: {
title: {
display: false,
text: '',
font: {},
padding: {},
},
legend: {
display: true,
position: 'top',
labels: { font: {}, color: '' },
},
tooltip: {
enabled: true,
mode: 'nearest',
intersect: true,
callbacks: {},
},
},
scales: {
x: {
title: {},
grid: {},
ticks: {},
},
y: {
beginAtZero: false,
min: undefined,
max: undefined,
title: {},
grid: {},
ticks: { stepSize: undefined, callback: null },
},
},
animation: {
duration: 1000,
easing: 'easeOutQuart',
onComplete: null,
onProgress: null,
},
onClick: null,
onHover: null,
},
plugins: [], // 인라인 플러그인 배열
};주요 API 메서드
- •chart.update(mode) — 차트 다시 그리기 ("none": 애니메이션 없음)
- •chart.destroy() — 차트 인스턴스 완전 제거
- •chart.reset() — 애니메이션 이전 상태로 초기화
- •chart.resize(width, height) — 차트 크기 변경
- •chart.toBase64Image() — 차트를 PNG base64 이미지로 변환
- •chart.getElementsAtEventForMode(e, mode, options) — 이벤트 위치의 요소 찾기
- •chart.setDatasetVisibility(index, visible) — 데이터셋 표시/숨김
- •chart.isDatasetVisible(index) — 데이터셋 표시 여부 확인
데이터셋 속성 레퍼런스 (Line)
- •borderColor — 선 색상
- •backgroundColor — 채우기 색상 (fill: true 시)
- •borderWidth — 선 두께 (기본: 3)
- •borderDash — 점선 패턴 [대시, 간격]
- •fill — 채우기 대상 (true, false, "origin", "+1", "-1")
- •tension — 곡선 정도 (0: 직선, 0.4: 부드러운 곡선)
- •stepped — 계단식 선 (true, "before", "after", "middle")
- •pointRadius — 포인트 크기 (0이면 숨김)
- •pointStyle — 포인트 모양 (circle, rect, triangle, star 등)
- •pointHoverRadius — 호버 시 포인트 크기
- •spanGaps — 누락 데이터(null) 건너뛰기
색상 유틸리티
javascript
// 미리 정의된 차트 색상 팔레트
var CHART_COLORS = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)',
};
// 투명도 있는 배경색 만들기
function withAlpha(color, alpha) {
return color.replace('rgb', 'rgba').replace(')', ', ' + alpha + ')');
}
// 사용 예시
var bgColor = withAlpha(CHART_COLORS.blue, 0.5);
// 결과: 'rgba(54, 162, 235, 0.5)'자주 쓰는 패턴 모음
javascript
// 1. 이미지로 다운로드
function downloadChart(chart, filename) {
var link = document.createElement('a');
link.download = filename + '.png';
link.href = chart.toBase64Image();
link.click();
}
// 2. 차트 제거 후 재생성 (타입 변경 시)
if (window.myChart) {
window.myChart.destroy();
}
window.myChart = new Chart(ctx, newConfig);
// 3. 반응형 크기 설정
new Chart(ctx, {
type: 'bar',
data: { /* ... */ },
options: {
responsive: true,
maintainAspectRatio: false, // 컨테이너 크기에 맞춤
},
});
// CSS: .chart-card { height: 400px; }💡
Chart.js 공식 문서(chartjs.org/docs)에서 각 차트 타입별 전체 옵션을 확인할 수 있습니다. 특히 Samples 섹션에서 다양한 실전 예제를 바로 확인하고 수정해볼 수 있습니다.