0
277
VistasDjango, ¿cómo enviar una matriz a JavaScript para mostrar dinámicamente un gráfico circular?
Tengo una matriz en Django views.py y quiero enviarla a HTML y mostrar un gráfico circular, pero fallé, probé muchos otros métodos y leí muchos tutoriales, en la mayoría de los casos, tienen un campo en modelos que almacenar algún número, y muestran esos números. En mi caso, necesito calcular el subtotal de tareas que están en diferentes estados. No estoy seguro de cómo enviar esos datos a chart.js con las etiquetas adecuadas o cualquier otro gráfico circular si hay alguna recomendación. 
vistas.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>
2 Respuestas
Responde la pregunta0
Necesita tener los datos de forma estructurada para chart.js
Estructuras de datos Chart JS https://www.chartjs.org/docs/latest/general/data-structures.html
Simplemente puede seguir la estructura Primitiva como se muestra a continuación o puede seguir la estructura Objeto con propiedades personalizadas (necesita hacer más formateo y análisis de datos).
$(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 } }); }); 
En sus vistas, Todo.objects.aggregate(...) debería devolver algo como esto (los valores se proporcionan como ejemplo):
{'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} Luego, este diccionario se pasa al contexto con la clave denominada counts_data . Uso de este bucle de nombre clave a través del diccionario para crear labels y data
labels: [{% for label in counts_data %} '{{ label }}', {% endfor %}], representadas como labels: [ 'to_do_count', 'in_progress_count', 'done_count', ],
data: [{% for label, value in counts_data.items() %} {{ value }}, {% endfor %}], representado como data: [ 3, 6, 1, ],
0
<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>