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

Question

我想统计companytype模型中的公司数量，并以饼状图的形式显示。计数应该根据公司表中的名称字段。

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

Answer 1

你把你的数据在数组在你的views.py，但也使它在你的new Chart数组，这个2D数组不喜欢图表。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刻度，所以如果你把它保留在选项中，你会在饼图后面看到难看的线条，删除它会让你的图表看起来好多了