Soy realmente nuevo en django y estoy tratando de crear una pequeña página donde se muestra un gráfico con chart.js. Quiero cargar el archivo javascript estático. Creé un archivo html básico llamado data_table.html y agregué una carpeta estática donde hay tres archivos: data_table.js, styles.css y una imagen bild.jpg. El archivo html es:
{% 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>Se cargan el archivo css y la imagen. La imagen se muestra y con el archivo css puedo cambiar el tamaño de la imagen. Entonces eso funciona, supongo? El archivo javascripts tiene el siguiente aspecto:
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 } } } }); El archivo javascript parece no estar cargado y no se muestra ningún gráfico. Sorprendentemente, si coloco el código JavaScript entre las etiquetas de script vacías en el cuerpo, el gráfico se muestra bien. También traté de poner la línea <script type="text/javascript" src="{% static 'data_table.js' %}"></script> en el mismo lugar donde está la etiqueta de script vacía en este momento. Tampoco funciona. No se arroja ningún error. Entonces, ¿qué estoy haciendo mal?
Gracias de antemano por sus respuestas. En especial si solo estoy cometiendo un error muy estúpido.
La solución es tan fácil como estúpido era el problema:
El archivo JS está cargado pero el código de la plantilla Django no se ejecuta. Esta es probablemente la razón por la que se llaman archivos estáticos . Para las personas que se encuentran con el mismo problema: cree otra vista que devuelva json. Obtenlo a través del código Javascript.
Debe crear 3 subdirectorios dentro del directorio estático css,js,img 1.Debe guardar el archivo data_table.js dentro de la carpeta js... 2.Luego cargue el directorio estático... {% carga estática%} 3.Incluya esto linea en archivo html
<script type="text/javascript" src="{% static 'js/data_table.js' %}"></script>Su archivo javascript debe ejecutarse después de que la página esté completamente cargada. Puede colocar el archivo js justo antes de que se cierre la etiqueta del cuerpo o agregar un detector de eventos llamado DOMContentLoaded , lo que significa que el código solo se ejecutará después de que se cargue la página.
PRIMER ENFOQUE
<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>SEGUNDO ENFOQUE
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 } } } }); });