使用Chart.js对接JSON数据时图表无法正常显示问题求助

故障原因及修复方案 #

1. 缺少必要依赖引入

department.php中没有提前引入jQuery和Chart.js库，二者是代码运行的基础前提，需在引入自定义JS文件之前完成本地引入。

2. JS文件路径拼写错误

department.php中引入JS的文件名拼写错误，写为deparment.js（缺少字母t），和实际文件名department.js不匹配，会导致JS代码完全不执行。

3. AJAX未指定JSON数据类型

department.js的AJAX请求没有配置dataType: "json"，jQuery默认会将返回结果识别为普通字符串，无法直接遍历提取属性。

4. 数值类型不匹配

接口返回的total字段是字符串类型，Chart.js渲染图表需要数值类型，需做类型转换。

5. 接口返回缺少正确响应头

departmentq.php返回JSON数据时没有指定响应头，浏览器可能将返回内容识别为普通文本，导致解析失败。

修改后的完整代码 #

department.php

<!-- 提前本地引入jQuery和Chart.js库，引入顺序需在自定义JS之前 -->
<div class="card">
  <div class="card-header">Department</div>
  <canvas id="department"></canvas>
  <!-- 修正拼写错误的JS文件名 -->
  <script type="text/javascript" src="department.js"></script>
</div>

departmentq.php

<?php
// 顶部先加JSON响应头，前面不能有任何输出内容
header('Content-Type: application/json');
// 原数据返回逻辑保持不变，示例参考如下
echo json_encode([
    ["dept_name"=>"BAKASS","total"=>"14"],
    ["dept_name"=>"BKKM","total"=>"7"],
    ["dept_name"=>"CDC","total"=>"5"],
    ["dept_name"=>"DENGGI","total"=>"10"],
    ["dept_name"=>"ENTOMOLOGI","total"=>"4"]
]);
?>

department.js

$(document).ready(function(){
 $.ajax({
  url: "departmentq.php",
  method: "GET",
  // 新增指定返回数据类型为JSON
  dataType: "json",
  success: function(data) {
    console.log(data);
    var dept_name = [];
    var total = [];
    // 饼图多色块背景色配置，可选优化
    var bgColors = [
        'rgba(255, 99, 132, 0.7)',
        'rgba(54, 162, 235, 0.7)',
        'rgba(255, 206, 86, 0.7)',
        'rgba(75, 192, 192, 0.7)',
        'rgba(153, 102, 255, 0.7)'
    ];

    for(var i in data) {
      dept_name.push(data[i].dept_name);
      // 将字符串类型的total转为数字
      total.push(Number(data[i].total));
    }

    var chartdata = {
      labels: dept_name,
      datasets : [
        {
          label: 'Total',
          backgroundColor: bgColors,
          data: total,
        }
      ]
    };

    var ctx = document.getElementById("department").getContext('2d');
    var myChart = new Chart(ctx, {
     type: 'pie',
     data: chartdata,
    });
   },
  });
});

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