차트 (Chart.js)

// 월별 게시글 수 집계
public function lineData(): ResponseInterface
{
    $rows = db_connect()
        ->table('posts')
        ->select("strftime('%Y-%m', created_at) as month, COUNT(*) as count")
        ->where('deleted_at', null)
        ->groupBy('month')
        ->orderBy('month', 'ASC')
        ->get()->getResultArray();

    return $this->response->setJSON([
        'labels' => array_column($rows, 'month'),
        'data'   => array_map('intval', array_column($rows, 'count')),
    ]);
}

const res  = await fetch('/examples/chart/line-data');
const json = await res.json();

new Chart(document.getElementById('lineChart'), {
    type: 'line',
    data: {
        labels: json.labels,
        datasets: [{
            label: '게시글 수',
            data: json.data,
            fill: true,
            tension: 0.4,   // 곡선 스무딩
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { position: 'top' } },
    }
});

new Chart(ctx, {
    data: {
        labels: json.labels,
        datasets: [
            {
                type: 'bar',          // 막대
                label: '게시글 수',
                data: json.counts,
                yAxisID: 'y',
            },
            {
                type: 'line',         // 꺾은선 (같은 차트에 중첩)
                label: '평균 조회수',
                data: json.avgViews,
                yAxisID: 'y1',        // 별도 Y축
                tension: 0.4,
            }
        ]
    },
    options: {
        scales: {
            y:  { position: 'left' },
            y1: { position: 'right', grid: { drawOnChartArea: false } }
        }
    }
});

<!-- jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

버전을 고정하려면 chart.js@4.4.4 처럼 명시합니다.