Добавьте график с помощью charjs в приложение django

Здравствуйте, моя цель - отобразить график с помощью chartjs с простым html/css/js Я не использую никакой фреймворк. У меня есть свой метод на стороне бэкенда, который возвращает контекст со следующими элементами:

context = {'client_id' : client_id, 'year' : year, 'spending' : monthly_spending}

Задача состоит в том, чтобы на моем фронтенде отображалась гистограмма с расходами за каждый месяц в году. Я пробовал много вещей, но ничего не загружается, я получаю ошибку. Что я сделал в основном /

{% block body %}
    <section>
        <div>
            <canvas id="spendingChart" width="500" height="500"></canvas>
        </div>
    </section>

</main>
{% endblock body %}

{% block script %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js"></script>

<script>
    const spendingData= {{ monthly_spending | safe }}
    const myChart = new Chart(document.getElementById('spendingChart').getContext("2d"), {
        type: 'line',
        data: {
            datasets: [{
                label: 'spending Over Time',
                data: spendingData,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                fill: true,
            }]
        },
        options: {
            responsive: true,
            scales: {
                x: { type: 'time', title: { display: true, text: 'Date' } },
                y: { title: { display: true, text: 'spending' } }
            }
        }
    });
</script>
{% endblock %}

Ничто не загружается, и у меня есть 2 ошибки в консоли, но я не уверен, что делать:

Uncaught SyntaxError: Cannot use import statement outside a module (at chart.min.js:1:1)
Uncaught SyntaxError: Unexpected token 'const' (at 1:50:5)

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