我为教师制作了一个页面，他们可以在其中查看学生的分数，并且有图表显示每个问题正确的学生数量。我试着只放两张图表，但它只显示一张图表，另一张图表一直是空白的。我认为如果发生问题是因为两个图表具有相同的名称，但是在我更改了图表的名称之一之后，它仍然只显示其中一个图表。这是我的 php/html/js 代码：
<?php
if (isset($_GET['question'])) {
$con = mysqli_connect("localhost", "root", "", "testing");
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
$sql = "SELECT * FROM `chapter 7 vocabulary test` WHERE `score".$_GET["question"]."`='1'";
$result = mysqli_query($con, $sql);
$full = mysqli_num_rows($result);
mysqli_free_result($result);
$sql = "SELECT * FROM `chapter 7 vocabulary test` WHERE `score".$_GET["question"]."`='0'";
$result = mysqli_query($con, $sql);
$none = mysqli_num_rows($result);
mysqli_free_result($result);
?>
<script src="jquery-3.3.1.min.js"></script>
<script src="Chart.js"></script>
<div id="canvas"><canvas id="questioncan1" style="height: 25vh; width: 25vh;"></canvas></div>
<script type="text/javascript">
let myChart = document.getElementById('questioncan1').getContext("2d");
Chart.defaults.global.defaultFontFamily = "Arial";
Chart.defaults.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = "black";
let questioncan1 = new Chart(myChart, {
type: "doughnut",
data: {
labels: [
"Full Credit",
"No Credit"
],
datasets: [
{
data: [
5,
15
],
backgroundColor: [
"#11FF00",
"#F7301E"
],
borderWidth: 0
}
]
},
options: {
scaleShowLabels: false,
responsive: false,
legend: {
display: false
}
}
});
</script>
<br><br>
<table>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
<?php
$sql = "SELECT * FROM `chapter 7 vocabulary test`";
$result = $con->query($sql);
while ($row = $result->fetch_assoc()) {
$sql2 = "SELECT * FROM `users` WHERE `snumber`='".$row["snumber"]."'";
$result2 = $con->query($sql2);
while ($row2 = $result2->fetch_assoc()) {
echo "<tr><td>".$row2['name']."</td><td>".$row["score".$_GET['question']]."</td></tr>";
}
}
?>
</table>
<script src="jquery-3.3.1.min.js"></script>
<div id="canvas"><canvas id="questioncan" style="height: 25vh; width: 25vh;"></canvas></div>
<script type="text/javascript">
let myChart = document.getElementById('questioncan').getContext("2d");
Chart.defaults.global.defaultFontFamily = "Arial";
Chart.defaults.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = "black";
let questioncan = new Chart(myChart, {
type: "doughnut",
data: {
labels: [
"Full Credit",
"No Credit"
],
datasets: [
{
data: [
<?php echo $full; ?>,
<?php echo $none; ?>
],
backgroundColor: [
"#11FF00",
"#F7301E"
],
borderWidth: 0
}
]
},
options: {
scaleShowLabels: false,
responsive: false,
legend: {
display: false
}
}
});
</script>
<br><br>
<table>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
<?php
$sql = "SELECT * FROM `chapter 7 vocabulary test`";
$result = $con->query($sql);
while ($row = $result->fetch_assoc()) {
$sql2 = "SELECT * FROM `users` WHERE `snumber`='".$row["snumber"]."'";
$result2 = $con->query($sql2);
while ($row2 = $result2->fetch_assoc()) {
echo "<tr><td>".$row2['name']."</td><td>".$row["score".$_GET['question']]."</td></tr>";
}
}
?>
</table>
<?php
}
?>