Django创建数据可视化图表时JavaScript模板块报错排查

你当前的代码存在两个直接触发报错的问题，另外编辑器飘红属于模板语法识别误报：

• 模板标签位置错误：base.html中已经将{% block scripts %}放置在<script>标签和$(document).ready()回调内部，但是子模板results.html填充块内容时又嵌套了完整的<script>标签和重复的$(document).ready()回调，渲染后会出现script标签嵌套、JS语法结构错乱，浏览器解析时直接抛出语法错误。
• 缺失必要DOM节点：当前脚本逻辑直接获取id为myChart的节点，如果页面中没有提前定义对应canvas元素，脚本执行时会抛出空值错误。
• 编辑器提示误报：常规HTML/JS语法校验无法识别Django/Jinja2类模板的{% %}标签语法，会错误标记模板标签为非法JS语法，这类提示不影响模板实际渲染运行。

两种正确写法二选一即可，不要混用：

写法1（推荐，灵活度更高） #

将base.html的脚本块移到公共依赖引入之后、页面最底部，不要提前包裹<script>标签和ready回调：

<!-- 提前引入公共依赖：jQuery、Chart.js -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/chart.min.js"></script>

<!-- 页面公共导航、侧边栏等内容 -->

<!-- 页面正文内容块 -->
{% block content %}{% endblock %}

<!-- 页面自定义脚本块，不额外套标签 -->
{% block scripts %}{% endblock %}

对应results.html内容调整为：

{% extends "base.html" %}

{% block content %}
<!-- 必须提前定义图表对应的canvas节点 -->
<canvas id="myChart" width="800" height="400"></canvas>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function(){
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                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
                }
            }
        }
    });
});
</script>
{% endblock scripts %}

写法2（保留原有base结构） #

如果你想保留base.html里提前写好的$(document).ready()包裹逻辑，就保持base.html原有代码不变，删掉results.html脚本块里多余的<script>标签和$(document).ready()嵌套，直接写核心JS逻辑即可：

{% extends "base.html" %}

{% block content %}
<canvas id="myChart" width="800" height="400"></canvas>
{% endblock %}

{% block scripts %}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            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
            }
        }
    }
});
{% endblock scripts %}

关于编辑器飘红的处理：如果使用PyCharm、VS Code类编辑器，安装对应模板语法支持插件、将模板文件夹标记为项目模板目录，即可消除模板标签的错误提示，这类提示本身不会影响服务端模板渲染结果。

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