Django 如何将数组发送到 JavaScript 以动态显示饼图？

Question

我在 Django views.py 中有一个数组，我想将它发送到 HTML 并显示一个饼图，但是 失败了，我尝试了很多其他方法并阅读了很多教程，在大多数情况下，他们有 模型中存储一些数字的字段，它们会显示这些数字。就我而言，我需要 计算处于不同状态的任务的小计。我不确定如何输出这些 如果有任何建议，请使用适当的标签或任何其他饼图将数据发送到 chart.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'))
        )

    
    return render(request, 'todo_lists/progress.html', {"counts_data": counts_data})

html

<script>
 
$(document).ready(function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
    labels: [1,2,3],
    
    datasets: [{
        label: '# of Votes',

        data:{{counts_data}},
        
        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
    }]
},
options: {
    responsive:false
    
}
});
});
</script>

Answer 1

您需要以结构化方式为 chart.js 获取数据
图表 JS 数据结构 https://www.chartjs.org/docs/latest/general/data-structures.html
您可以简单地遵循如下所示的 Primitive 结构，也可以遵循具有自定义属性的 Object 结构（需要进行进一步的数据格式化和解析）。

    $(document).ready(function() {
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                // labels format ['label1', 'label2', 'label3', ]
                // you can choose to have a static labels if you are sure that 
                // there is always a specific number of labels
                labels: [{% for label in counts_data %} '{{ label }}', {% endfor %}],

                datasets: [{
                    label: '# of Votes',

                    // data format [value1, value2, value3, ]
                    data: [{% for label, value in counts_data.items() %} {{ value }}, {% endfor %}],

                    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
                }]
            },
            options: {
                responsive: false

            }
        });
    }); 

在您看来，Todo.objects.aggregate(...) 应该返回类似这样的内容（值作为示例提供）：

{'to_do_count': 3, 'in_progress_count': 6, 'done_count': 1}

    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'))
        )
    # counts_data = {'to_do_count': 3, 'in_progress_count': 6, 'done_count': 1}

这个字典然后被传递给上下文，其键名为counts_data。使用这个键名在字典中循环创建labels 和data

labels: [{% for label in counts_data %} '{{ label }}', {% endfor %}], 呈现为labels: [ 'to_do_count', 'in_progress_count', 'done_count', ],

data: [{% for label, value in counts_data.items() %} {{ value }}, {% endfor %}], 呈现为data: [ 3, 6, 1, ],

Answer 2

<script>
 
$(document).ready(function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
    labels: [1,2,3],
    
    datasets: [{
        label: '# of Votes',

        data:counts_data,

        success: function (data){
        $('#todocount').html(counts_data.to_do_count);
        $('#progress_count').html(counts_data.in_progress_count);

        $('#progress_done').html(counts_data.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
    }]
},
options: {
    responsive:false
    
}
});
});
</script>