Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

218
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!