使用 django 和图表 js 无法在模板中看到饼图

Posted 2023-02-24

【中文标题】使用 django 和图表 js 无法在模板中看到饼图

【英文标题】：Unable to see pie chart in template using django and chart js

【发布时间】：2021-11-21 04:03:32

【问题描述】：

我想计算 companytype 模型中的公司数量并在饼图中显示。计数应按公司表中的名称字段。

例如：如果公司类型是医疗，并且该类别中有 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)

如果有问题，我会从 index.html 文件中获取 Chartjs 代码。

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>

【参考方案1】：

您将数据放入views.py 中的数组中，但随后也将其设置为new Chart 中的数组，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 刻度，因此如果您将其保留在您的选项中，您的饼图后面会出现难看的线条，删除它会使您的图表看起来更好

【讨论】：

我试过去掉括号还是不行。

你的html中真的有一个ID为myChart的canvas标签吗？

是的，画布标签中写有ID。