如何将PHP生成的数组通过Ajax传递给JS脚本用于Chart.JS渲染

问题原因&解决步骤 #

1. 修正PHP端返回结构

你当前PHP生成的是[{"chartResultats":"xxx","chartDate":"xxx"},...]的二维结构，和你需要的两个一维数组结构不匹配，且缺少JSON输出步骤，修正代码如下：

// 初始化两个独立数组
$chartResultats = [];
$chartDate = [];
foreach ($result as $row) {
  $chartDate[] = date("d/m", strtotime($row['created_at']));
  $chartResultats[] = $row['traitements'];
}
// 拼接成目标结构
$data = [
  "chartResultats" => $chartResultats,
  "chartDate" => $chartDate
];
// 输出JSON，指定响应头
header('Content-Type: application/json');
echo json_encode($data);
exit;

2. 修正前端Ajax代码

存在三个问题：未指定JSON响应解析、变量名拼写错误、给Chart传参时多套了一层数组，修正代码如下：

$.ajax({
  url:"./inc/charts/area_chart.charts.php",
  method:"GET",
  dataType: "json", // 自动解析JSON响应
  success:function(data)  {
    console.log(data);
    const chartResultats = data.chartResultats;
    const chartDate = data.chartDate;

    // Area Chart
    var ctx = document.getElementById("chartResultats");
    var myLineChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: chartDate, // 不要额外加[]，本身已经是数组
        datasets: [{
          data: chartResultats, // 修正拼写错误，不要额外加[]
        }],
      }
      // 剩余样式、交互配置按你的需求补充即可
    });
  }
})

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