未创建图表

Question

我正在使用此语法尝试在我的页面上创建圆环图。控制台没有显示任何错误，但我没有创建图表。

我已确认查询准确有效。我还使用 console.log 验证了 JavaScript 数组是否按预期填充了结果。

图表无法显示但控制台为空。我应该更改什么以使图表根据需要显示在页面上？

<?php
$con=mysqli_connect("site", "user", "pass", "db");
if (mysqli_connect_errno())
{
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$sql="Select donorName, numdonors500Club, numdonors5000Club, numdonors50000Club, numdonors500000Club, numdonors500000000Club FROM donors";

$result = mysqli_query($con,$sql);
$data = [];
while($row = $result->fetch_array(MYSQLI_ASSOC)) {
    $data[] = $row;
}
mysqli_free_result($result);
mysqli_close($con);

?>

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">
</head>
<body>
<canvas id="doughnut-chart" width="800" height="450"></canvas>
</body>

<script type="text/javascript">
var ctx = document.getElementById('doughnut-chart').getContext('2d');
var information = <?php echo json_encode($data) ?>;
new Chart(document.getElementById("doughnut-chart"), {
    type: 'doughnut',
    data: {
      labels: ["500 Club", "5000 Club", "50000 Club", "500000 Club", "5000000 Club"],
      datasets: [
        {
          label: "Donors",
          data: information, 
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Donor Info'
      }
    }
});
</script>
</html>

Answer 1

您在

中提供的data

  datasets: [
    {
      label: "Donors",
      data: information, 
    }
  ]

即。 information 是一个 number[]，一个数字数组。您的 SQL 查询 returns 一个 JSON 对象。因此，您将只需要包括来自单个对象的数值。您可以为此使用 .map()。包括除 donorName

之外的所有字段

未创建图表

Chart Is Not Created

javascript

chart.js

chart.js2