嘿，我一直在做我的Web应用程序项目，我需要做一个图表，所以我在另一个文件中单独try 了一下，它工作得很好，但当我粘贴到index.html中时，我不知道为什么
一张饼图运行得很好，但条形图就不行了.我一直在try 更改版本，等等，但什么都不起作用.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>˚₊‧ Welcome Page ‧₊˚</title>
<link href="indexstyle.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
</head>
<body>
<h1>Welcome, <b>𐙚 ♡</b></h1>
<div class="topsection">
<div class="leftside">
<h2>Active Population</h2>
<ul id="activepopulation"><li onclick="populationfunction('AIs',2020)">AIs - F2020 (2)</li>
<li onclick="populationfunction('AIs',2021)">AIs - S2021 (2)</li>
<li onclick="populationfunction('CS',2020)">CS - F2020 (4)</li>
<li onclick="populationfunction('CS',2021)">CS - S2021 (3)</li>
<li onclick="populationfunction('DSA',2020)">DSA - F2020 (7)</li>
<li onclick="populationfunction('DSA',2021)">DSA - S2021 (4)</li>
<li onclick="populationfunction('ISM',2020)">ISM - F2020 (4)</li>
<li onclick="populationfunction('ISM',2021)">ISM - S2021 (3)</li>
<li onclick="populationfunction('SE',2020)">SE - F2020 (4)</li>
<li onclick="populationfunction('SE',2021)">SE - S2021 (4)</li></ul>
</div>
<div id="rightside">
<div id="piechart">
<canvas height="400" id="pieChart" width="400"></canvas>
<script>
var data = [
{
value: 4,
color:"#fcedf5",
highlight: "#e9cdfa",
label: "AIs"
},
{
value: 7,
color: "#fad7e9",
highlight: "#e9cdfa",
label: "CS"
},
{
value: 11,
color: "#fcbdde",
highlight: "#e9cdfa",
label: "DSA"
},
{
value: 7,
color: "#ffb0d9",
highlight: "#e9cdfa",
label: "ISM"
},
{
value: 8,
color: "#fc9acd",
highlight: "#e9cdfa",
label: "SE"
}];
var ctx = document.getElementById("pieChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);
</script>
</div>
</div>
</div>
<div class="bottomsection">
<div class="leftside">
<h2>Overall atendance</h2>
<ul id="attendance"><li onclick="populationfunction('AIs',2020)">AIs - F2020 (69%)</li>
<li onclick="populationfunction('AIs',2021)">AIs - S2021 (78%)</li>
<li onclick="populationfunction('CS',2020)">CS - F2020 (70%)</li>
<li onclick="populationfunction('CS',2021)">CS - S2021 (67%)</li>
<li onclick="populationfunction('DSA',2020)">DSA - F2020 (68%)</li>
<li onclick="populationfunction('DSA',2021)">DSA - S2021 (76%)</li>
<li onclick="populationfunction('ISM',2020)">ISM - F2020 (71%)</li>
<li onclick="populationfunction('ISM',2021)">ISM - S2021 (66%)</li>
<li onclick="populationfunction('SE',2020)">SE - F2020 (74%)</li>
<li onclick="populationfunction('SE',2021)">SE - S2021 (68%)</li></ul>
</div>
<div id="rightside">
<div id="barChart">
<canvas height="400" id="barChart" width="400"></canvas>
<script>
var data = {
labels: ["AIs", "CS", "DSA", "ISM", "SE"],
datasets: [{
label: "2020 Intake",
data: [0.69, 0.7, 0.68, 0.71, 0.74],
backgroundColor: ["#fcedf5", "#fad7e9", "#fcbdde", "#ffb0d9", "#fc9acd"],
borderColor: "#fff",
borderWidth: 1
},{
label: "2021 Intake",
data: [0.78, 0.67, 0.76, 0.71, 0.74],
backgroundColor: ["#fcedf5", "#fad7e9", "#fcbdde", "#ffb0d9", "#fc9acd"],
borderColor: "#fff",
borderWidth: 1
}]
};
var ctx = document.getElementById("barChart").getContext("2d");
var myNewChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
indexAxis: 'y',
scales: {
x: {
min: 0,
max: 1,
ticks: {
callback: function(value) {
return (value * 100) + "%";
}}}}}
});</script>
</div>
</div>
</div>
<p class="footer">Website last generation 10th Feb 2024 ₍ᐢ. ̫.ᐢ₎ </p>
<script crossorigin="anonymous" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function populationfunction(population,year){
$.ajax({
url: "http://localhost:8001/students",
type: "GET",
data: {
key1: population,
key2: year
},
error: function(xhr, status, error){
alert('Error: ' + xhr.status)
}
})
}
</script>
</body>
</html>