為什么我在 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