Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

219
Vistas
No se puede ver el gráfico circular en la plantilla usando django y chart js

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>
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda