Django集成Chart.js数据不显示问题求助

1. 先修复AJAX请求的拼写错误 #

你的前端JS代码里，AJAX配置的参数写错了：把urls改成url——这是jQuery AJAX的必填参数，拼写错误会导致请求根本发不出去，success回调不会触发，setChart()也就不会执行，图表自然无法渲染。

修改后的AJAX代码：

$.ajax({
    method: "GET",
    url: endpoint, // 这里把urls改成url
    success: function(data){
        labels = data.labels
        defaultData = data.default
        setChart()

    },
    error: function(error_data){
        console.log("error")
        console.log(error_data)

    }
})

2. 验证依赖是否正确引入 #

确保你在HTML里正确引入了jQuery和Chart.js，顺序要注意：先引入jQuery，再引入Chart.js，比如：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

如果没引入这两个依赖，AJAX和Chart.js的代码都会直接失效。

3. 检查Django的URL配置 #

确保你在项目的urls.py里把ChartData视图映射到了/chart/data/路径，比如：

from django.urls import path
from .views import ChartData

urlpatterns = [
    # 其他路由
    path('chart/data/', ChartData.as_view(), name='chart-data'),
]

如果路由配置错了，AJAX请求会返回404错误。你可以打开浏览器开发者工具（F12）→ 网络标签，查看请求的状态码，确认是否能正常拿到API数据。

4. 确保DOM加载完成后再执行JS #

把你的JS代码放在$(document).ready()里，保证canvas元素加载完成后再执行AJAX和图表初始化：

$(document).ready(function() {
    var endpoint = '/chart/data/'
    var defaultData = []
    var labels = [];
    $.ajax({
        method: "GET",
        url: endpoint,
        success: function(data){
            labels = data.labels
            defaultData = data.default
            setChart()

        },
        error: function(error_data){
            console.log("error")
            console.log(error_data)

        }
    })

    function setChart(){
        var ctxSI = document.getElementById("SumberChart");
        var SumberChart = new Chart(ctxSI, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: '# of Votes',
                data: defaultData,
                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
                }
            }
        },
        
        });
    }   
});

如果canvas还没加载就执行document.getElementById("SumberChart")，会获取到null，导致Chart初始化失败。

5. 调试技巧 #

打开浏览器开发者工具（F12）：

• 看控制台标签，检查是否有JS报错；
• 看网络标签，确认AJAX请求是否成功、返回数据是否正确；
• 看元素标签，确保canvas元素存在，并且可以给它设置固定宽高（比如style="width: 400px; height: 300px;"），避免因尺寸问题导致图表显示异常。

优先修复AJAX的拼写错误，这是最直接的问题。

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