LEVEL 54 QUEST

Chart.js 기반 매출/사용량 통계

Chart.js를 활용하여 라인 차트, 바 차트, 도넛 차트를 구현하고 PHP JSON API와 AJAX로 동적 업데이트합니다.

Chart.js CDN 연동 및 기본 사용법

Chart.js란?

Chart.js는 HTML5 Canvas 기반의 오픈소스 차트 라이브러리입니다. 라인, 바, 도넛, 레이더 등 다양한 차트를 간단한 설정으로 구현할 수 있으며, 반응형과 애니메이션을 기본 지원합니다.

        <!-- CDN으로 Chart.js 로드 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

<!-- 기본 차트 생성 -->
<canvas id="myChart" width="400" height="200"></canvas>

<script>
const ctx = document.getElementById('myChart').getContext('2d');

const chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
        datasets: [{
            label: '월 매출(만원)',
            data: [120, 190, 170, 250, 320, 500],
            borderColor: '#3b82f6',
            backgroundColor: 'rgba(59,130,246,0.1)',
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { labels: { color: '#e2e8f0' } }
        },
        scales: {
            x: { ticks: { color: '#94a3b8' } },
            y: { ticks: { color: '#94a3b8' } }
        }
    }
});
</script>
    

라인 차트: 월별 매출 추이

12개월 매출 추이 차트

최근 12개월간의 매출 추이를 라인 차트로 시각화합니다. 목표 매출선과 실제 매출을 비교하여 성과를 한눈에 파악할 수 있습니다.

        // revenue_chart.js - 매출 추이 라인 차트
function createRevenueChart(canvasId, data) {
    const ctx = document.getElementById(canvasId).getContext('2d');

    return new Chart(ctx, {
        type: 'line',
        data: {
            labels: data.map(d => d.month),
            datasets: [
                {
                    label: '실제 매출',
                    data: data.map(d => d.revenue),
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59,130,246,0.15)',
                    fill: true,
                    tension: 0.4,
                    pointRadius: 4,
                    pointHoverRadius: 6
                },
                {
                    label: '목표 매출',
                    data: data.map(d => d.target),
                    borderColor: '#f59e0b',
                    borderDash: [5, 5],
                    fill: false,
                    tension: 0,
                    pointRadius: 0
                }
            ]
        },
        options: {
            responsive: true,
            interaction: { intersect: false, mode: 'index' },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: (ctx) => ctx.dataset.label + ': ₩' +
                            ctx.parsed.y.toLocaleString() + '원'
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: (v) => (v / 10000).toLocaleString() + '만',
                        color: '#94a3b8'
                    },
                    grid: { color: '#1e293b' }
                },
                x: {
                    ticks: { color: '#94a3b8' },
                    grid: { display: false }
                }
            }
        }
    });
}
    

🔒

여기까지는 미리보기입니다

Chart.js 기반 매출/사용량 통계
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)