Chart.js 3 - 如何按月统计 MySQL 条目并将其显示在条形图中答案

【问题标题】：Chart.js 3 - How to count MySQL entries by month and display them in a bar chartChart.js 3 - 如何按月统计 MySQL 条目并将其显示在条形图中
【发布时间】：2023-02-10 01:26:52
【问题描述】：

我有一个数据库，其中包含我想每月计数的条目，并将它们显示在每年的条形图中。我必须承认我对 MySQL 和 PHP 还很陌生，所以请多多包涵。我可以看到图表画布，但没有显示数据。我只是不知道如何让数据显示在图表中。

数据库查询

//query to get data from the table
$query = sprintf("SELECT aangemaakt FROM afwijkings_rapporten ORDER BY aangemaakt");

//execute query
$result = $pdo->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
  $data[] = $row;
}

//now print the data
print json_encode($data);

$数据

[
  {"aangemaakt":"2023-02-25 11:08:00","0":"2023-02-25 11:08:00"},
  {"aangemaakt":"2023-02-25 11:14:00","0":"2023-02-25 11:14:00"},
  {"aangemaakt":"2023-03-25 13:07:00","0":"2023-03-25 13:07:00"},
  {"aangemaakt":"2023-04-06 16:28:00","0":"2023-04-06 16:28:00"},
  {"aangemaakt":"2023-05-09 09:12:00","0":"2023-05-09 09:12:00"},
  {"aangemaakt":"2023-06-09 09:12:00","0":"2023-06-09 09:12:00"},
  {"aangemaakt":"2023-07-09 09:12:00","0":"2023-07-09 09:12:00"},
  {"aangemaakt":"2023-08-09 09:12:00","0":"2023-08-09 09:12:00"},
  {"aangemaakt":"2023-09-09 09:12:00","0":"2023-09-09 09:12:00"},
  {"aangemaakt":"2023-10-09 09:12:00","0":"2023-10-09 09:12:00"},
  {"aangemaakt":"2023-10-09 09:12:05","0":"2023-10-09 09:12:05"},
  {"aangemaakt":"2023-10-09 09:12:20","0":"2023-10-09 09:12:20"}
]

图表.js

$(document).ready(function(){
  $.ajax({
    url: "chartdata.php",
    method: "GET",
    success: function(data) {
      console.log(data);
      var aangemaakt = [];

      for(var i in data) {
        aangemaakt.push(data[i].aangemaakt);
      }

      var data = {
        labels: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
        datasets: [{
          label: 'Aantal rapporten per maand',
          data: aangemaakt,
          backgroundColor: 'rgba(229,31,47,1)',
          borderWidth: 1
        }]
      };

      const config = {
        type: 'bar',
        data: data,
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true
            }
          }
        },
        // plugins: [ChartDataLabels]
      };

      const aantalPerMaand = new Chart(
        document.getElementById('aantalPerMaand'),
        config
      );

    }
  });
});

【问题讨论】：

请使用表格结构和一些示例数据（插入或降价表）更新您的问题。目前，您传递给图表配置的数据是一个日期数组，但轴配置为从零开始。我不确定您期望它产生什么。

标签： php mysql chart.js

【解决方案1】：

由于我们不知道您的 afwijkings_rapporten 表包含什么，除了 aangemaakt 中的日期时间，这里有一个简单的建议可以帮助您入门。

此查询将为您提供 12 个月的数据（包括当月）：

// query to get data from the table
$query = <<<'SQL'
        SELECT DATE_FORMAT(`aangemaakt`, '%Y%m') AS `grp`, DATE_FORMAT(`aangemaakt`, '%b %Y') AS `label`, COUNT(*) AS `num`
        FROM `afwijkings_rapporten`
        WHERE `aangemaakt` >= CURRENT_DATE - INTERVAL 11 MONTH - INTERVAL (DAY(CURRENT_DATE) - 1) DAY
          AND `aangemaakt` <  CURRENT_TIMESTAMP
        GROUP BY `grp`, `label`
        ORDER BY `grp` ASC
        SQL;

// execute query
$result = $pdo->query($query);

// set the fetch mode so we don't get both numeric and associative keys
$result->setFetchMode(PDO::FETCH_ASSOC);

然后在您的成功处理程序中，您可以分配标签（月份）及其值：

let labels = [];
let values = [];

for(let row of data) {
    labels.push(row.label);
    values.push(row.num);
}

【讨论】：