레슨 6 / 8·20분
플러그인과 커스터마이징
커스텀 플러그인 만들기
Chart.js의 플러그인 시스템을 활용하면 차트의 렌더링 파이프라인에 커스텀 로직을 삽입할 수 있습니다. beforeDraw, afterDraw 같은 라이프사이클 훅을 사용하여 차트 위에 추가 요소를 그리거나 동작을 커스터마이징합니다.
javascript
// 도넛 차트 가운데에 텍스트를 표시하는 플러그인
const centerTextPlugin = {
id: 'centerText',
beforeDraw: function(chart) {
if (chart.config.type !== 'doughnut') return;
var ctx = chart.ctx;
var width = chart.width;
var height = chart.height;
ctx.save();
ctx.font = 'bold 24px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#333';
// 데이터 합계 계산
var total = chart.data.datasets[0].data.reduce(function(a, b) {
return a + b;
}, 0);
ctx.fillText(total.toLocaleString(), width / 2, height / 2 - 10);
ctx.font = '14px Arial';
ctx.fillStyle = '#888';
ctx.fillText('총 합계', width / 2, height / 2 + 15);
ctx.restore();
},
};
// 전역 등록
Chart.register(centerTextPlugin);
// 또는 개별 차트에만 적용
new Chart(ctx, {
type: 'doughnut',
data: { /* ... */ },
plugins: [centerTextPlugin],
});배경 그라데이션 플러그인
javascript
// 차트 영역에 배경 그라데이션 적용
const backgroundGradientPlugin = {
id: 'backgroundGradient',
beforeDraw: function(chart) {
var ctx = chart.ctx;
var chartArea = chart.chartArea;
var gradient = ctx.createLinearGradient(
0, chartArea.top,
0, chartArea.bottom
);
gradient.addColorStop(0, 'rgba(54, 162, 235, 0.05)');
gradient.addColorStop(1, 'rgba(54, 162, 235, 0.15)');
ctx.save();
ctx.fillStyle = gradient;
ctx.fillRect(
chartArea.left,
chartArea.top,
chartArea.right - chartArea.left,
chartArea.bottom - chartArea.top
);
ctx.restore();
},
};주요 플러그인 라이프사이클 훅
- •beforeInit / afterInit — 차트 초기화 전후
- •beforeUpdate / afterUpdate — 데이터 업데이트 전후
- •beforeDraw / afterDraw — 전체 차트 그리기 전후
- •beforeDatasetsDraw / afterDatasetsDraw — 데이터셋 그리기 전후
- •beforeEvent / afterEvent — 사용자 이벤트 처리 전후
- •resize — 차트 크기 변경 시
- •destroy — 차트 제거 시
데이터셋 스타일 고급 커스터마이징
javascript
// 그라데이션 채우기 영역
var canvas = document.getElementById('myChart');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(54, 162, 235, 0.5)');
gradient.addColorStop(1, 'rgba(54, 162, 235, 0.0)');
new Chart(ctx, {
type: 'line',
data: {
labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
datasets: [{
label: '매출 추이',
data: [120, 190, 150, 250, 220, 300],
fill: true,
backgroundColor: gradient,
borderColor: 'rgb(54, 162, 235)',
borderWidth: 2,
tension: 0.4,
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointBorderWidth: 2,
pointRadius: 5,
pointHoverRadius: 8,
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)',
pointHoverBorderWidth: 3,
}],
},
});전역 기본값 설정
javascript
// 전역 폰트 설정
Chart.defaults.font.family = "'Noto Sans KR', sans-serif";
Chart.defaults.font.size = 13;
Chart.defaults.color = '#555';
// 전역 플러그인 설정
Chart.defaults.plugins.legend.position = 'bottom';
Chart.defaults.plugins.tooltip.cornerRadius = 8;
// 전역 애니메이션 설정
Chart.defaults.animation.duration = 1000;
Chart.defaults.animation.easing = 'easeOutQuart';
// 전역 스케일 설정
Chart.defaults.scales.linear.beginAtZero = true;
Chart.defaults.scales.linear.grid.color = 'rgba(0, 0, 0, 0.05)';💡
Chart.defaults를 활용하면 프로젝트 전체에서 일관된 차트 스타일을 유지할 수 있습니다. 앱의 진입점에서 한 번 설정하면 모든 차트에 자동으로 적용됩니다.