Почему моя интеграция javascript в шаблон django не работает?

Я новичок в django и пытаюсь создать небольшую страницу, на которой будет отображаться график с помощью chart.js. Я хочу загружать файл javascript статически. Я создал основной html-файл под названием data_table.html и добавил папку static, в которой находятся три файла: data_table.js, styles.css и картинка bild.jpg. html-файл выглядит следующим образом:

{% load static %}
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="{% static 'styles.css' %}" type="text/css">
    <script type="text/javascript" src="{% static 'data_table.js' %}"></script>
    <title>Data viewer</title>
    
</head>
<body>
    <canvas id="myChart" width="200" height="200"></canvas>
    <script>
    </script>
    <p class="text">Picture:</p>
    <br>
    <img class="img" src="{% static 'bild.jpg' %}" alt="My image">
</body>
</html>

Загружается файл css и картинка. Картинка отображается и с помощью css файла я могу изменить размер картинки. Так это работает, я полагаю? Файл javascripts выглядит следующим образом:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [{% for d in data%}'{{d.label}}',{%endfor%}],
        datasets: [{
            label: '# of Votes',
            data: [{% for d in data%}{{d.data}},{%endfor%}],
            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
            }
        }
    }
});

Похоже, что файл javascript не загружается и график не отображается. Удивительно, но если я помещаю код javascript между пустыми тегами script в body, график отображается нормально. Я также попытался поместить <script type="text/javascript" src="{% static 'data_table.js' %}"></script> в том же месте, где сейчас находится пустой тег script. Это также не работает. Ошибка не возникает. Так что же я делаю не так?

Заранее благодарю за ответы. В частности, если я просто делаю очень глупую ошибку.

Вы должны создать 3 подкаталога внутри статической директории css, js, img 1.Вы должны сохранить файл data_table.js в папке js...... 2.Затем загрузите статическую директорию... {% load static %} 3.Включите эту строку в html файл

<script type="text/javascript" src="{% static 'js/data_table.js' %}"></script>

Ваш файл javascript должен быть запущен после полной загрузки страницы. Вы можете либо разместить js-файл непосредственно перед закрытием тега body, либо добавить слушатель событий DOMContentLoaded, что означает, что код будет выполняться только после загрузки страницы

ПЕРВЫЙ ПОДХОД

<html>
    <head>
        ...
    </head>
    <body>
        ...
        <!-- Place your js file just before body closes, when all elements are loaded -->
        <script type="text/javascript" src="{% static 'data_table.js' %}"></script>
    </body>
</html>

ВТОРОЙ ПОДХОД

document.addEventListener('DOMContentLoaded', function()
{
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [{% for d in data%}'{{d.label}}',{%endfor%}],
            datasets: [{
                label: '# of Votes',
                data: [{% for d in data%}{{d.data}},{%endfor%}],
                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
                }
            }
        }
    });  
});

Решение так же просто, как и проблема, которая была глупой:

JS-файл лаодируется, но код шаблона django не выполняется. Возможно, поэтому его называют статическими файлами . Для тех, кто столкнулся с той же проблемой: создайте другое представление, которое возвращает json. Получите его через Javascript код.

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