Chart.js 3：如何按月统计MySQL数据并展示为柱状图

问题分析 #

当前代码存在两个核心问题导致图表无数据展示：

• 数据库查询仅返回单条记录的aangemaakt时间字段，未按月统计记录数量，前端拿到的是日期字符串而非月度计数
• 前端AJAX回调未将返回的JSON字符串解析为JavaScript对象，数据遍历逻辑无效

解决方案 #

1. 修改PHP查询逻辑（chartdata.php） #

调整查询语句，让MySQL直接按月分组统计记录数，同时确保1-12月每个月都有数据（无记录时返回0）：

// 设定目标年份，可按需改为指定年份，比如固定'2023'
$targetYear = date('Y');

// 初始化1-12月的计数数组，默认值为0
$monthlyCounts = array_fill(1, 12, 0);

// 查询指定年份各月的记录数量
$query = "
    SELECT MONTH(aangemaakt) AS month_num, COUNT(*) AS record_count
    FROM afwijkings_rapporten
    WHERE YEAR(aangemaakt) = :year
    GROUP BY MONTH(aangemaakt)
";

// 预处理并执行查询
$stmt = $pdo->prepare($query);
$stmt->bindParam(':year', $targetYear, PDO::PARAM_INT);
$stmt->execute();

// 将查询结果填充到初始化数组中
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $month = (int)$row['month_num'];
    $monthlyCounts[$month] = (int)$row['record_count'];
}

// 输出仅包含计数的JSON数组
echo json_encode(array_values($monthlyCounts));

2. 修改前端Chart.js代码 #

确保正确解析JSON数据，直接使用统计后的月度计数渲染图表：

$(document).ready(function(){
  $.ajax({
    url: "chartdata.php",
    method: "GET",
    dataType: "json", // 自动将返回的JSON字符串转为JS对象
    success: function(monthlyCounts) {
      console.log(monthlyCounts);

      const chartData = {
        labels: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
        datasets: [{
          label: 'Aantal rapporten per maand',
          data: monthlyCounts, // 直接使用统计后的月度计数数组
          backgroundColor: 'rgba(229,31,47,1)',
          borderWidth: 1
        }]
      };

      const chartConfig = {
        type: 'bar',
        data: chartData,
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true,
              ticks: {
                stepSize: 1 // Y轴步长设为1，匹配整数记录数
              }
            }
          }
        }
      };

      new Chart(
        document.getElementById('aantalPerMaand'),
        chartConfig
      );
    }
  });
});

关键修改说明 #

• 后端：通过MySQL的MONTH()和YEAR()函数实现分组统计，初始化12个月的数组保证每个月份都有数据，避免图表缺失月份
• 前端：添加dataType: "json"自动解析返回数据，直接使用统计后的计数数组作为图表数据源，简化逻辑

内容的提问来源于stack exchange，提问作者Empire Hive