如何将PHP从MySQL查询得到的数组数据填充到Chart.js的labels与data字段

实现方案 #

第一步：调整PHP代码，单独生成标签和数值的JSON数组

修改你现有的PHP数据处理逻辑，单独拆分出姓名标签数组和对应数值数组，同时将数值转为整型避免JS识别为字符串出错：

<?php 
// 初始化两个空数组分别存标签和数值
$chartLabels = [];
$chartData = [];

// 原有数据库查询逻辑不变
$rscht = mysqli_query($conn,"SELECT users.name, COUNT(*) AS times FROM chat_logs INNER JOIN users ON chat_logs.sender_email = users.email GROUP BY chat_logs.sender_email ORDER BY times DESC");

while($userchat= mysqli_fetch_array($rscht)){
    // 分别把字段塞到对应数组
    $chartLabels[] = $userchat['name'];
    $chartData[] = (int)$userchat['times'];
}

// 转成JSON格式，可直接作为JS数组使用
$chartLabelsJson = json_encode($chartLabels);
$chartDataJson = json_encode($chartData);
?>

第二步：替换Chart.js配置中的对应位置

如果你的Chart初始化代码写在PHP可解析的页面（比如.php后缀的文件）里，直接用echo输出上面生成的JSON即可：

const pieChart2 = new Chart(document.getElementById('chats'), {
  type: 'pie',
  data: {
    labels: <?php echo $chartLabelsJson; ?>,
    datasets: [{
      data: <?php echo $chartDataJson; ?>,
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
      hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }]
  },
  options: {
    responsive: true
  }
});

可选兼容方案（JS代码在独立.js文件的场景）

如果你的Chart初始化逻辑放在独立的静态JS文件中，无法直接解析PHP代码，可以先在PHP渲染的HTML页面中定义全局变量传递数据：

<!-- 在HTML页面的头部先输出全局变量 -->
<script>
window.pieChartLabels = <?php echo $chartLabelsJson; ?>;
window.pieChartData = <?php echo $chartDataJson; ?>;
</script>
<!-- 再引入你的独立JS文件 -->
<script src="你的Chart初始化JS文件路径"></script>

之后在独立JS文件中直接调用全局变量即可：

labels: window.pieChartLabels,
data: window.pieChartData,

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