我已经消除了 Chrome 控制台中的所有错误，除了 4 个红色错误和 4 个黄色错误。
黄色来自inject.bundle.js.map，我读到的内容可以忽略。
两个红色错误状态：“未检查的runtime.lastError：消息端口在收到响应之前关闭。”，这是我的声明。
几分钟后出现这个红色错误：“未检查的runtime.lastError：侦听器通过返回 true 指示异步响应，但消息通道在收到响应之前关闭”
随后是“inject.bundle.js：119未捕获（承诺中）TypeError：无法解构'n'的属性'json'，因为它未定义。在inject.bundle.js：119：15503960”
图表未呈现。我确实让垂直版本可以工作！
所有组件都在同一个 php 文件中。有 3 个元素，两个可用的图表（MariaDB 选择），以及一个单独的图表选择，它也返回正确的信息。
如果我激活 header('Content-Type: application/json') 标签，则文件仅返回文本，并且我会看到对显示 Y 标签和 X 数据的 Php 代码的响应。
我的标题是：
<head>
<meta charset="utf-8">
<title>Exam Account</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer">
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<!-- Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js" integrity="sha512-6HrPqAvK+lZElIZ4mZ64fyxIBTsaX5zAFZg2V/2WT+iKPrFzTzvx6QAsLW2OaLwobhMYBog/+bvmIEEGXi0p1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
图表区域在这里：
<div >
<canvas id="myChart" width="600" height="400"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx,{
type: 'bar',
data: {
labels:[ <?php echo json_encode($GrpA); ?>,<?php echo json_encode($GrpB); ?>,<?php echo json_encode($GrpC); ?>,<?php echo json_encode($GrpD); ?>,<?php echo json_encode($GrpE); ?>,<?php echo json_encode($GrpF); ?>,<?php echo json_encode($GrpG); ?>,<?php echo json_encode($GrpH); ?>],
data :{
datasets: [{
axis: 'y',
label: 'Exam Results',
data: [<?php echo json_encode($AP); ?>,<?php echo json_encode($BP); ?>,<?php echo json_encode($CP); ?>,<?php echo json_encode($DP); ?>,<?php echo json_encode($EP); ?>,<?php echo json_encode($FP); ?>,<?php echo json_encode($GP); ?>,<?php echo json_encode($HP); ?>],
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
rgb(201, 203, 207)'
],
borderWidth: 1
}]
},
config : {
type: 'bar',
options: {
indexAxis: 'y',
}
}
}
});
</script>
我哪里迷路了？
谢谢你。
终于在https://www.youtube.com/watch?v=HU6TK4D9ty8
找到了答案谢谢 Nick Wong 的视频！！！！！！