Почему Chart.js не отображается? Ошибка: Uncaught ReferenceError: Chart не определен

Я пытаюсь внедрить chart.js в свой проект django, и я начинаю с примера графика, используемого на сайте chart.js, а затем изменяю данные и настраиваю его.

Однако я пока не могу заставить график по умолчанию работать, и продолжаю получать сообщение об ошибке: Uncaught ReferenceError: Chart is not defined Это заставляет меня думать, что библиотека установлена неправильно, но я использовал несколько различных CDN и не могу заставить ее работать, любая помощь будет очень признательна!

html template:

{% extends 'base.html' %}
{% load static %}

{% block content %}
<canvas id="myChart" width="400" height="400"></canvas>
<script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Weight', 'Run Distance', 'Run Time', 'Date'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    </script>
{% endblock content %}

views.py:

def health_hub_tracker(request):
    serialized_stats = []
    for stats in HealthStats.objects.filter(user=request.user):
        serialized_stats.append({
            "weight": stats.weight,
            "run_distance": stats.run_distance,
            "run_time": stats.run_time,
            "date": stats.date,
        })
    context = {
        "stats": serialized_stats
        }
    print(serialized_stats)
    return render(request, "health_hub_tracker.html", context)

base.html scripts:

   <!-- Popper JS -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous">
    </script>
    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">
    </script>
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/cdefc89d16.js" crossorigin="anonymous"></script>
    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Вы загружаете скрипт chart.js после контента. Вот почему он не определен. Также вам не нужно 2 CDN.

Лучшее, что вы можете сделать, это поместить тег script для загрузки chart.js в раздел head, таким образом вы всегда будете уверены, что он загружается до запуска ваших собственных скриптов.

Вернуться на верх