Невозможно увидеть круговую диаграмму в шаблоне, используя django и chart js

Я хочу подсчитать количество компаний в модели companytype и показать это на круговой диаграмме. Подсчет должен вестись по полю name в таблице company.

Например: Если тип компании медицинская и в этой категории 4 компании, то я хочу показать их количество на круговой диаграмме.

models.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)

views.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)

Я взял код Chartjs из файла index.html если что не так.

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

Вы помещаете свои данные в массивы в views.py, но затем также делаете их массивами в new Chart, этот 2D массив не нравится chart.js, изменение вашего new Chart на это должно решить проблему:

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: {
  }
});

Примечание: круговая диаграмма не имеет шкалы y, поэтому вы получите некрасивые линии за кругом, если сохраните ее в опциях, удалив ее, ваша диаграмма будет выглядеть намного лучше

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