无法将JSON数据载入Chart.js，图表无法正常显示求助

我是Chart.js新手，尝试通过jQuery的AJAX调用包含MySQL查询的PHP文件获取数据来显示柱状图。页面仅显示X、Y坐标轴，却无法显示图表，但AJAX已成功获取到JSON数组。

原HTML页面代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Chart.js Sample</title>
  <script type="text/javascript" src="chart.umd.js"></script>
  <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
  <style type="text/css">
    #myChart {
      min-width: 100px;
      max-width: 500px;
      min-height: 200px;
      max-height: 400px;
    }
  </style>
</head>
<body>
  <canvas id="myChart"></canvas>

  <script type="text/javascript">
    var chData = [];

    $(document).ready(function(){

      $.ajax({
        url: "ajax.php",
        method: "GET",
        dataType: "JSON",
        contentType: "application/json; charset=utf-8",
        success: function(data) {
          chData = data;
        }
      });

      var chartId = new Chart($("#myChart"), {
         type: 'bar',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY"],
            datasets: [{
               label: "Subjects",
               data: chData
            }]
         }
      });

    });
  </script>
</body>
</html>

原AJAX页面代码 #

<?php

$conn = mysqli_connect("localhost", "root", "mypass", "chart") or die("Mysql Error Connect: ".mysqli_error());

  $arr = [];

  $q = mysqli_query($conn, "SELECT score FROM score");
  if(mysqli_num_rows($q)>0) {
    while($x = mysqli_fetch_array($q)) {
      $score = $x["score"];
      array_push($arr, $score);
    }
  }
  
  header('Content-type: application/json');
  echo json_encode($arr);

?>

运行代码后，开发者工具控制台显示已获取的JSON数组：

chData
(5) ['44', '35', '22', '28', '73']

问题分析 #

• 异步执行顺序问题：AJAX是异步操作，创建Chart的代码会在AJAX请求完成前执行，此时chData还是空数组，图表初始化时没有数据，自然显示不出柱子。后续chData被赋值，但Chart实例不会自动更新。
• 数据类型不匹配：返回的分数是字符串类型，Chart.js绘制柱状图需要数字类型的数据，这也可能导致图表无法正确渲染。

解决步骤 #

1. 确保在获取数据后初始化图表：将Chart的创建逻辑移到AJAX的success回调函数内部，保证只有拿到数据后才初始化图表。
2. 转换数据类型为数字：可以在PHP中直接将分数转为数字，或者在JavaScript中处理。

修改后的HTML页面代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Chart.js Sample</title>
  <script type="text/javascript" src="chart.umd.js"></script>
  <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
  <style type="text/css">
    #myChart {
      min-width: 100px;
      max-width: 500px;
      min-height: 200px;
      max-height: 400px;
    }
  </style>
</head>
<body>
  <canvas id="myChart"></canvas>

  <script type="text/javascript">
    $(document).ready(function(){
      $.ajax({
        url: "ajax.php",
        method: "GET",
        dataType: "JSON",
        contentType: "application/json; charset=utf-8",
        success: function(data) {
          // 将字符串数据转为数字
          const chData = data.map(item => parseInt(item));
          // 获取数据后再初始化图表
          var chartId = new Chart($("#myChart"), {
             type: 'bar',
             data: {
                labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY"],
                datasets: [{
                   label: "Subjects",
                   data: chData
                }]
             }
          });
        }
      });
    });
  </script>
</body>
</html>

可选：修改PHP页面直接返回数字类型 #

如果不想在JS里处理，也可以在PHP中将分数转为整数：

<?php
$conn = mysqli_connect("localhost", "root", "mypass", "chart") or die("Mysql Error Connect: ".mysqli_error());

$arr = [];

$q = mysqli_query($conn, "SELECT score FROM score");
if(mysqli_num_rows($q)>0) {
  while($x = mysqli_fetch_array($q)) {
    // 将字符串转为整数后存入数组
    $score = (int)$x["score"];
    array_push($arr, $score);
  }
}

header('Content-type: application/json');
echo json_encode($arr);
?>

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