Django как передать массив в JavaScript для динамического отображения круговой диаграммы?

У меня есть массив в Django views.py и я хочу отправить его в HTML и отобразить пьечарт, но не получилось, я пробовал много других методов и читал много руководств, в большинстве случаев, у них есть поле в модели, которое хранит некоторое число, и они отображают это число. В моем случае, мне нужно вычислить промежуточный итог задач, которые находятся в разных состояниях. Я не уверен, как вывести эти данные в chart.js с соответствующими метками или любую другую круговую диаграмму, если есть какие-либо рекомендации? pie chart became rectangles

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>

pie chart not show up properly

<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>

Для работы с chart.js необходимо иметь структурированные данные
. Структуры данных Chart JS https://www.chartjs.org/docs/latest/general/data-structures.html
. Вы можете следовать примитивной структуре, как показано ниже, или объектной структуре с пользовательскими свойствами (необходимо выполнить дальнейшее форматирование и разбор данных).

    $(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

            }
        });
    });

enter image description here

Вернуться на верх