Django中如何将视图层数据传递给Chart.js实现图表正常渲染

核心问题 #

• HTML结构不符合规范：<h1>、body标签放在<html>根标签外部，且body提前闭合，后续的canvas、脚本代码都不在正确的DOM结构内，浏览器无法正常解析元素。
• 模板变量转义问题：Django模板变量直接输出到JavaScript代码中时，默认会对引号等特殊字符进行转义，Python列表的原生输出格式无法被JS直接识别，会触发语法错误。

具体修改方法 #

视图层代码无需改动，只需修改HTML模板即可，修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--Chart js-->
    <title>Sample Graph</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
  </head>
  <body>
    <h1>Trial page</h1>
    <!-- 原有的labels验证输出 -->
    <div>{{labels}}</div>
    <!-- 安全转换Django变量为JS可读取的JSON格式 -->
    {{ labels|json_script:"labels-data" }}
    {{ outputdata|json_script:"outputdata-data" }}
    <canvas id="myChart" width="200" height="100"></canvas>

    <script>
    // 解析获取到的数据源
    const labels = JSON.parse(document.getElementById('labels-data').textContent);
    const outputdata = JSON.parse(document.getElementById('outputdata-data').textContent);
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: '# of Votes',
                data: outputdata,
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    </script>
  </body>
</html>

主要修改点 #

1. 修正了HTML层级结构，所有内容都放在<body>标签内部，符合浏览器DOM解析规则
2. 使用Django内置的json_script过滤器转换模板变量，避免特殊字符转义问题，保证JS可以正常识别数组格式
3. 调整了Chart.js初始化逻辑，先解析合法数据源再渲染图表
   如果修改后仍无法正常显示，可按F12打开浏览器开发者工具，在控制台标签页查看具体报错信息定位问题。

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