Диаграмма не отображается после использования Chartjs в php

Это мой фрагмент кода с моей веб-страницы. Я пытаюсь сделать график процента посещаемости студентов с конкретным идентификатором предмета, скажем, CSE2006.

<div id = "chart-container">
    <canvas id = "graphCanvas"></canvas>
</div>

<script>
    $(document).ready(function () {
        showGraph();
    });


    function showGraph()
    {
        {
            $.post("pra.php",
            function (data)
            {
                console.info(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}]

Запишите свой объект chartdata в консоль и посмотрите, соответствует ли он статической рабочей версии, которая, как я полагаю, у вас была раньше.

04FS 14.03.2019 15:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
49
0

Другие вопросы по теме