在PHP中使用Chartjs后,图表未显示

时间:2019-03-14 14:00:03

标签: javascript php chart.js

这是我网页上的代码段。我正在尝试绘制一个带有特定科目编号说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}]

0 个答案:

没有答案