如何将Django中aggregate聚合得到的数组传递到JavaScript中使用

问题排查 #

你遇到的问题主要有两个：

1. 视图层上下文传递错误
   Django的render方法第三个参数为模板上下文字典，你直接传入aggregate返回的统计字典，相当于给模板暴露了to_do_count、in_progress_count、done_count三个独立变量，模板中根本不存在你尝试遍历的data变量。
2. 前端遍历逻辑错误
   就算你把统计结果存入名为data的上下文变量，Django模板遍历字典默认返回键名而非值，也拿不到正确的统计数值。

修复方案 #

方案一（最简修改，无需序列化） #

直接修改前端JS代码，不用遍历，直接调用上下文变量即可，和你的labels顺序一一对应：

data: {
    labels: ['todo','inprogress','done'],
    datasets: [{
        label: '# of Votes',
        // 直接调用视图传入的三个统计变量
        data: [{{ to_do_count }}, {{ in_progress_count }}, {{ done_count }}],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)'
        ],
        borderWidth: 1
    }]
}

方案二（规范写法，适合数据结构复杂的场景） #

先修改视图层，将统计数据序列化后传递：

import json
from django.shortcuts import render
# 其余导入保持不变

def visualisation(request, project_id):
    project = Project.objects.get(id=project_id)
    # 你的其余过滤逻辑保持不变
    counts_data = Todo.objects.aggregate(
        to_do_count = Count('pk', filter=Q(status='to_do')),
        in_progress_count = Count('pk', filter=Q(status='in_progress')),
        done_count = Count('pk', filter=Q(status='done'))
    )
    # 按前端label顺序组装成列表，序列化后传入上下文
    count_list = [counts_data['to_do_count'], counts_data['in_progress_count'], counts_data['done_count']]
    context = {
        'count_list': json.dumps(count_list)
    }
    return render(request, 'todo_lists/progress.html', context)

再修改前端JS代码，直接读取序列化后的数据即可：

data: {
    labels: ['todo','inprogress','done'],
    datasets: [{
        label: '# of Votes',
        // 加safe过滤器避免Django自动转义引号
        data: {{ count_list|safe }},
        // 其余样式代码保持不变
    }]
}

内容的提问来源于stack exchange，提问作者Lucas R.G