Django项目中JS脚本失效，Chart.js图表无法显示的问题求助

以下是针对图表区块加载正常但饼图/柱状图不显示问题的排查和解决步骤：

1. 修正Chart.js加载顺序与脚本执行时机 #

当前base.html中Chart.js放在<head>标签内，更稳妥的做法是将其CDN引用移到<body>标签末尾（</body>之前），确保DOM完全加载后再初始化图表。

如果使用内联脚本或main.js，需将图表初始化代码包裹在DOM加载完成的事件监听中：

document.addEventListener('DOMContentLoaded', function() {
  // 图表初始化代码写在这里
});

2. 修复模板循环生成的JS数组语法错误 #

模板循环生成labels和data时，最后会多出一个逗号，导致JS数组语法无效（如['a', 'b', ]），这是老版本JS的常见报错点。修改循环逻辑，去掉多余的逗号：

labels: [{% for order in order %}'{{ order.name }}'{% if not forloop.last %},{% endif %}{% endfor %}],
data: [{% for order in order %}{{ order.order_quantity }}{% if not forloop.last %},{% endif %}{% endfor %}],

3. 确保静态文件引用正确 #

• base.html中的自定义CSS路径使用了绝对路径/css/style.css，应改为Django静态文件模板标签：

  <link rel="stylesheet" href="{% static 'css/style.css' %}">
  

• 检查浏览器控制台的Network标签，确认main.js是否成功加载（状态码200），若出现404则检查STATICFILES_DIRS配置是否正确，以及main.js是否放在static目录下。

4. 查看浏览器控制台定位具体错误 #

按F12打开浏览器开发者工具，切换到Console标签：

• 若提示Chart is not defined：说明Chart.js未正确加载，检查CDN链接是否有效，或是否被浏览器拦截。
• 若提示Cannot read properties of null (reading 'getContext')：说明脚本执行时canvas元素还未加载，需调整脚本执行时机（参考步骤1）。
• 若有语法错误：根据错误提示定位代码问题，通常是模板循环生成的数组格式错误（参考步骤2）。

内容的提问来源于stack exchange，提问作者wvw23