javascript - 在 php 中使用 Chartjs 后图表未显示

Question

这是我网页上的代码片段。我正在尝试使用特定主题 ID 制作学生出勤率图表，例如 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}]

标签： javascriptphpchart.js