主页 / coding / 问题 / 79343449
Accepted
Electricow
Asked: 2025-01-10 00:58:57 +0800 CST

无法将 JSON 数据放入 Chart.JS

  • 772

我是 Chart.js 的新手，正在尝试显示一个条形图，其中的数据使用 jquery 的 AJAX 调用来调用包含存储数据的 mysql 查询的 PHP 文件。

应该显示图表的页面仅显示 X 轴和 Y 轴，但没有显示图表，即使存在我从 Ajax 调用中获得的数组。

我已经花了 5 天时间修修补补，我觉得是时候放弃并四处打听了，

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']

有人能指出我哪里做错了吗？感谢您的时间和帮助

jquery

1 个回答

  1. Best Answer

    AJAX 请求是异步的。从您当前的代码来看，它将直接进入该var chartId = ...行，而无需等待请求完成。

    因此，您应该将创建实例的部分移至Chart回调，success以便当响应返回成功状态代码时，它将传递data以创建Chart实例。

    $.ajax({
  url: "ajax.php",
  method: "GET",
  dataType: "JSON",
  contentType: "application/json; charset=utf-8",
  success: function(data) {
    var chartId = new Chart($("#myChart"), {
      type: 'bar',
      data: {
        labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY"],
        datasets: [{
          label: "Subjects",
          data: data
        }]
      }
    });
  }
});

    而且您不需要为 声明全局变量chData。

    • 0

相关问题