ChartJS 每月动态数据集 - mysql，ajax

Question

我对 chartJS (https://www.chartjs.org/) 和每月分组条形图有疑问。

jQuery代码如下：

function dutch_format(value) {

  const months = {
      "jan" : "Januari",
      "feb" : "Februari",
      "mrt" : "Maart",
      "apr" : "April",
      "mei" : "Mei",
      "jun" : "Juni",
      "jul" : "Juli",
      "aug" : "Augustus",
      "sep" : "September",
      "okt" : "Oktober",
      "nov" : "November",
      "dec" : "December"
  };

  return months[value];
}
  
$.ajax({
  type: 'POST',
  url: 'assets/ajax/get-expenses2.php',
  dataType: 'json',
  cache: false,
  data: {}, 
  success: function (data) {
    //console.log(data);

    var month = [];
    var month_name = [];
    var tot_sum = [];
    var year = [];
    var cat_name = [];

    for(var i in data) {
      month.push(data[i].month);
      month_name.push(data[i].month_name);
      tot_sum.push(data[i].tot_sum);
      year.push(data[i].year);
      cat_name.push(data[i].cat_name);
    }

    var chartdata = {
      labels: month,
      datasets: [
        {
          label: cat_name,
          data: tot_sum,
          backgroundColor     : 'rgba(60,141,188,0.9)',
          borderColor         : 'rgba(60,141,188,0.8)',
          pointRadius          : false,
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)'            
        }
      ]

    };

    var ctx = $('#barChart').get(0).getContext('2d');

    var barChartOptions = {
      responsive              : true,
      maintainAspectRatio     : false,
      datasetFill             : false,
      scales: {
        yAxes: [{
          display: true,
          ticks: {
              beginAtZero: true,
              suggestedMax: 850,
              stepSize: 50
          }
        }]
      },
      tooltips: {
        yAlign: 'bottom',
        xAlign: 'center',
        callbacks: {
          label: function(tooltipItems) {
            return 'Uitgaven'+': '+Number(tooltipItems.yLabel)+' €';
          },
          title: function(tooltipItems, data) {
            return dutch_format(tooltipItems[0].xLabel);
          }          
        }
      },
      legend: {
        display: true,
        padding: 30
      }
    };      

    var myChart = new Chart(ctx, {
      type: 'bar',
      options: barChartOptions,
      data: chartdata
    });
  }
  
});

get-expenses2.php

$query = ''
  . 'SELECT year(la.created) as year, 
            DATE_FORMAT(la.created, "%b") as month, 
            monthname(la.created) as month_name, 
            c.cat_name as cat_name, 
            TRUNCATE((SUM(la.article_price * la.article_qty)), 2) as tot_sum '
  . 'FROM list_articles la '
  . 'LEFT JOIN articles a ON a.id=la.article_id '
  . 'LEFT JOIN cats c ON c.id=a.article_cat '
  . 'WHERE la.active=0 '
  . 'GROUP BY year, month '
  . 'order by year, month(la.created)';



$test = $db->rawQuery($query);

$response = array();

foreach($test as $t) {
  $response[] = $t;
}

echo json_encode($response);

控制台日志输出：

(2) [{…}, {…}]
0
: 
cat_name
: 
"Voeding"
month
: 
"feb"
month_name
: 
"februari"
tot_sum
: 
127.12
year
: 
2023
[[Prototype]]
: 
Object
1
: 
cat_name
: 
"Voeding"
month
: 
"mrt"
month_name
: 
"maart"
tot_sum
: 
762.45
year
: 
2023
[[Prototype]]
: 
Object
length
: 
2
[[Prototype]]
: 
Array(0)

对于每个 cat_name，我需要在 monthname 下有一个不同的栏。所以数据集必须是动态的。这一刻我有 6 个 cat_name 和他们自己的数据

我怎么解决这个问题？