Django无法向Chart.js传递数据 图表渲染失败求助

• 使用Bootstrap模板搭建网站，尝试将Django视图中的数据传递到HTML再到Chart.js，按常规传变量的方式操作失败，数据无法显示
• 现有两个图表：一个带预定义数据集的饼图，一个需要从视图传数据的环形图，渲染后均无法显示

相关代码 #

View.py #

ctx = {
    "tournament": tournament,
    "pairing": pairing,
    "players_points": players_points,
    "army_points": army_points,
    "teamB": teamB,
    "form": form,
    "green": green,
    "yellow": yellow,
    "red": red,
    "green_p": green_p,
    "yellow_p": yellow_p,
    "red_p": red_p,
    "total": total,
    # "chart_data": chart_data,
    "chart_data": json.dumps(chart_data),
}
return render(request, "pairing5v5.html", ctx)

HTML #

<div class="container-fluid pt-4 px-4">
    <div class="row g-4">
        <div class="col-sm-12 col-xl-6">
            <div class="bg-secondary rounded h-100 p-4">
                <h6 class="mb-4">Pie Chart</h6>
                <canvas id="pie-chart" width="500" height="500"></canvas>
            </div>
        </div>
        <div class="col-sm-12 col-xl-6">
            <div class="bg-secondary rounded h-100 p-4">
                <h6 class="mb-4">Doughnut Chart - {{ chart_data|safe }}</h6>
                <canvas id="doughnut-chart"></canvas>
            </div>
        </div>
    </div>
</div>

main.js #

// Pie Chart
var ctx5 = $("#pie-chart").get(0).getContext("2d");
var myChart5 = new Chart(ctx5, {
    type: "pie",
    data: {
        labels: ["Italy", "France", "Spain", "USA", "Argentina"],
        datasets: [{
            backgroundColor: [
                "rgba(235, 22, 22, .7)",
                "rgba(235, 22, 22, .6)",
                "rgba(235, 22, 22, .5)",
                "rgba(235, 22, 22, .4)",
                "rgba(235, 22, 22, .3)"
            ],
            data: [55, 49, 44, 24, 15]
        }]
    },
    options: {
        responsive: true
    }
});

// Doughnut Chart
var ctx6 = $("#doughnut-chart").get(0).getContext("2d");
var myChart6 = new Chart(ctx6, {
    type: "doughnut",
    data: {
        labels: ["Green", "Yellow", "Red"],
        datasets: [{
            backgroundColor: [
                "rgba(235, 22, 22, .7)",
                "rgba(235, 22, 22, .6)",
                "rgba(235, 22, 22, .5)",
            ],
            data: {{ chart_data|safe }}
        }]
    },
    options: {
        responsive: true
    }
});

错误原因及修复方案 #

1. 饼图不显示的核心问题 #

• DOM加载时机错误：main.js中的代码可能在页面DOM未完全加载时执行，导致无法获取到canvas元素。
• Chart.js未正确引入：如果HTML中没有加载Chart.js库，会直接导致Chart对象未定义。

修复：

• 将main.js的代码包裹在$(document).ready()中，确保DOM加载完成后再初始化图表。
• 确认HTML中已正确引入Chart.js库（比如通过本地文件或合法的CDN方式）。

2. 环形图数据传递的错误 #

• Django的模板变量{{ chart_data|safe }}无法在外部JS文件中解析，因为外部JS不会经过Django模板引擎处理，模板标签不会被替换成实际数据。

修复：

• 在HTML页面中，将Django传递的变量赋值给全局JS变量，再在main.js中引用这个全局变量。

修改后的完整代码 #

修改后的HTML #

<div class="container-fluid pt-4 px-4">
    <div class="row g-4">
        <div class="col-sm-12 col-xl-6">
            <div class="bg-secondary rounded h-100 p-4">
                <h6 class="mb-4">Pie Chart</h6>
                <canvas id="pie-chart" width="500" height="500"></canvas>
            </div>
        </div>
        <div class="col-sm-12 col-xl-6">
            <div class="bg-secondary rounded h-100 p-4">
                <h6 class="mb-4">Doughnut Chart - {{ chart_data|safe }}</h6>
                <canvas id="doughnut-chart"></canvas>
            </div>
        </div>
    </div>
</div>
<!-- 定义全局JS变量存储图表数据 -->
<script>
    window.chartData = {{ chart_data|safe }};
</script>

修改后的main.js #

// 等待DOM完全加载后执行
$(document).ready(function() {
    // Pie Chart初始化
    var ctx5 = $("#pie-chart").get(0).getContext("2d");
    var myChart5 = new Chart(ctx5, {
        type: "pie",
        data: {
            labels: ["Italy", "France", "Spain", "USA", "Argentina"],
            datasets: [{
                backgroundColor: [
                    "rgba(235, 22, 22, .7)",
                    "rgba(235, 22, 22, .6)",
                    "rgba(235, 22, 22, .5)",
                    "rgba(235, 22, 22, .4)",
                    "rgba(235, 22, 22, .3)"
                ],
                data: [55, 49, 44, 24, 15]
            }]
        },
        options: {
            responsive: true
        }
    });

    // Doughnut Chart初始化
    var ctx6 = $("#doughnut-chart").get(0).getContext("2d");
    var myChart6 = new Chart(ctx6, {
        type: "doughnut",
        data: {
            labels: ["Green", "Yellow", "Red"],
            datasets: [{
                backgroundColor: [
                    "rgba(46, 204, 113, .7)",
                    "rgba(241, 196, 15, .7)",
                    "rgba(231, 76, 60, .7)"
                ],
                data: window.chartData
            }]
        },
        options: {
            responsive: true
        }
    });
});

视图代码保持不变 #

你的View.py中用json.dumps(chart_data)传递数据的方式是正确的，确保chart_data是一个合法的数值数组即可（比如chart_data = [green, yellow, red]）。

额外检查步骤 #

1. 打开浏览器开发者工具（F12），查看Console面板是否有报错，比如Chart is not defined、Cannot read property 'getContext' of null等，这些报错能直接定位问题。
2. 查看HTML渲染后的源码，确认window.chartData是否被正确赋值为预期的数组。

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