我真的是新的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文件，我可以调整图片的大小。我想这行得通吧?javascript文件如下所示:
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>在空脚本标记所在的同一位置的行。它也不起作用。不会抛出错误。我做错了什么?
谢谢你的回复。特别是如果我犯了一个非常愚蠢的错误。
解决方案就像愚蠢的问题一样简单:
JS文件被加载，但是django模板代码没有被执行。这可能就是为什么它被称为静态文件。对于遇到同样问题的人:创建另一个返回json的视图。通过Javascript代码获取。
您应该在static directory中创建3个子目录css, js, img1.您应该将data_table.js文件保存在js文件夹.....中2.然后加载静态目录…{%负载静态%}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
}
}
}
});
});