为什么我在 django 模板中的 javascript 集成不起作用？

Question

我对 django 真的很陌生，我正在尝试构建一个小页面，其中显示带有 chart.js 的图表。 我想加载静态的javascript文件。 我创建了一个名为 data_table.html 的基本 html 文件，并添加了一个静态文件夹，其中包含三个文件：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 type="text/javascript" src="{% static 'data_table.js' %}"></script>行放在空脚本标记所在的位置。 它也不起作用。 没有错误被抛出。 那我做错了什么？

感谢您的回答。 特别是如果我只是在做一个非常愚蠢的错误。

Answer 1

解决方案就像愚蠢的问题一样简单：

加载了JS文件但没有执行django模板代码。 这可能就是为什么它被称为静态文件。 对于遇到相同问题的人：创建另一个返回 json 的视图。 通过 Javascript 代码获取它。

Answer 2

您应该在静态目录 css,js,img 中创建 3 个子目录 1.您应该将 data_table.js 文件保存在 js 文件夹中..... 2.然后加载静态目录... {% load static %} 3.Include this html文件中的一行

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

Answer 3

您的 javascript 文件需要在页面完全加载后运行。 您可以在 body 标签关闭之前放置 js 文件，或者添加一个名为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
                }
            }
        }
    });  
});

为什么我在 django 模板中的 javascript 集成不起作用？

问题描述

3 个解决方案

解决方案1
1 2022-06-06 09:25:04

解决方案2
0 2022-06-02 14:03:20

解决方案3
0 2022-06-02 14:17:39

为什么我在 django 模板中的 javascript 集成不起作用？

问题描述

3 个解决方案

解决方案1 1 2022-06-06 09:25:04

解决方案2 0 2022-06-02 14:03:20

解决方案3 0 2022-06-02 14:17:39

解决方案1
1 2022-06-06 09:25:04

解决方案2
0 2022-06-02 14:03:20

解决方案3
0 2022-06-02 14:17:39