这是我网页上的代码段。我正在尝试绘制一个带有特定科目编号说CSE2006的学生出勤率图表。
<div id="chart-container">
<canvas id="graphCanvas"></canvas>
</div>
<script>
$(document).ready(function () {
showGraph();
});
function showGraph()
{
{
$.post("pra.php",
function (data)
{
console.log(data);
var subject = [];
var attendance= [];
for (var i in data) {
subject.push(data[i].subid);
attendance.push(data[i].at);
}
var chartdata = {
labels: subject,
datasets: [
{
label: 'Student Attendance',
backgroundColor: '#49e2ff',
borderColor: '#46d5f1',
hoverBackgroundColor: '#CCCCCC',
hoverBorderColor: '#666666',
data: attendance
}
]
};
var graphTarget = $("#graphCanvas");
var barGraph = new Chart(graphTarget, {
type: 'bar',
data: chartdata,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
fixedStepSize: 5,
max: 100,
min: 0
},
gridLines: {
color: 'black',
zeroLineColor: 'black',
zeroLineWidth: 4
}
}],
xAxes: [{
gridLines: {
display:false,
zeroLineWidth: 4,
},
barPercentage: 1.0,
categoryPercentage: 0.1
}]
}
}
});
});
}
}
</script>
由于浏览器控制台未显示任何错误,我不知道到底是什么问题。我已经包含了上面所有的javascript文件。 pra.php提供此输出
[{"subid":"CSE1004","at":100},{"subid":"CSE2006","at":0}]