Quiero contar el número de empresas en el modelo de tipo de empresa y mostrarlo en un gráfico circular. El conteo debe ser por el campo de nombre en la tabla de la empresa.
Por ejemplo: si el tipo de empresa es médico y hay 4 empresas en esa categoría, quiero mostrar su recuento en un gráfico circular.
modelos.py
class CompanyType(models.Model): company_type = models.CharField(max_length=100) is_active = models.BooleanField(default=True) created_at = models.DateField(auto_now_add=True) updated_at = models.DateField(auto_now=True) class Company(models.Model): name = models.CharField(max_length=100) address = models.TextField() company_type = models.ForeignKey(CompanyType,on_delete=models.CASCADE) is_active = models.BooleanField(default=True)vistas.py
def index(request): labels = [] data = [] queryset = Company.objects.values('company_type__company_type').annotate(company_type_sum=Count('name')).order_by('-company_type_sum') for entry in queryset: labels.append(entry['company_type__company_type']) data.append(entry['company_type_sum']) context = { 'labels':labels, 'data':data, } return render(request,'index.html',context)Tomé el código Chartjs del archivo index.html si hay algún problema.
índice.html
<script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: [data.labels], datasets: [{ label: 'Companies in Particular Section', data: [data.data], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); </script>Está colocando sus datos en matrices en sus views.py , pero también lo convierte en una matriz en su new Chart , esta matriz 2D no es del agrado de chart.js, cambiar su new Chart a esto debería solucionar el problema:
new Chart(ctx, { type: 'pie', data: { labels: data.labels, // Remove double array datasets: [{ label: 'Companies in Particular Section', data: data.data, // Remove double array backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { } });En una nota al margen, el gráfico circular no tiene una escala, por lo que obtendrá líneas feas detrás de su gráfico circular si lo mantiene en sus opciones, eliminarlo hará que su gráfico se vea mucho mejor.