Django如何传递任务状态统计数据到前端使用Chart.js渲染饼图

核心问题说明 #

你当前的报错和显示异常来自三个错误：

1. Django聚合返回的counts_data是Python字典格式，无法直接作为Chart.js的data参数传入，JS无法识别Python字典语法
2. 饼图标签未对应状态，data字段格式不符合Chart.js要求的数字数组格式
3. 未给canvas元素设置固定宽高，关闭响应式适配后会默认拉伸为矩形

具体修复步骤 #

1. 模板数据传递修正 #

两种实现方式二选一即可：

方式1：直接提取字典值（简单场景首选）

直接在JS中按key取出对应数值，组成Chart.js需要的数组格式，同时修改对应标签：

data: {
    // 替换原来的[1,2,3]标签
    labels: ['待办', '进行中', '已完成'],
    datasets: [{
        // 替换原来的# of Votes
        label: '任务数量',
        // 替换原来的{{counts_data}}
        data: [{{ counts_data.to_do_count }}, {{ counts_data.in_progress_count }}, {{ counts_data.done_count }}],
        // 原有颜色配置保留即可
        ...
    }]
}

方式2：JSON序列化（数据量多的场景更安全）

先在HTML模板的<body>区域添加序列化标签：

{{ counts_data|json_script:"todo-counts" }}

再在JS中读取序列化后的数据：

const counts = JSON.parse(document.getElementById('todo-counts').textContent)
// data部分修改为
data: [counts.to_do_count, counts.in_progress_count, counts.done_count]

该方法可以避免特殊字符导致的JS语法报错，适合正式项目使用。

2. 修复显示为矩形的问题 #

在HTML中添加canvas元素时，必须显式设置固定宽高（你已经设置了responsive:false，必须指定尺寸）：

<canvas id="myChart" width="400" height="400"></canvas>

3. 可选优化：处理空值异常 #

如果某类状态没有任务，聚合返回的结果会是None，直接传入JS会报错，可以在views.py中补充默认值处理：

def visualisation(request, project_id):
    project = Project.objects.get(id=project_id)
    counts_data = Todo.objects.aggregate(
        to_do_count=Count('id', filter=Q(status='to_do')),
        in_progress_count=Count('id', filter=Q(status='in_progress')),
        done_count=Count('id', filter=Q(status='done'))
    )
    # 补充默认值为0
    counts_data = {k: v if v is not None else 0 for k, v in counts_data.items()}
    return render(request, 'todo_lists/progress.html', {"counts_data": counts_data})

其他饼图实现方案推荐 #

• 纯CSS饼图：无需引入JS依赖，适合不需要交互的静态展示场景，代码量极小
• ECharts饼图：中文文档完善，支持3D效果、钻取等复杂交互，配置逻辑和Chart.js接近，上手成本低
• django-admin-charts：如果是后台管理场景的统计需求，可以直接用该Django插件，无需手写前端代码即可快速生成各类统计图表

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