Как сделать запрос к базе данных и отобразить его на charts.js в django
Здравствуйте, я пытаюсь отобразить все торговые площадки в виде ярлыка и количество нарушений на этих площадках в виде данных на круговой диаграмме. Пожалуйста, помогите.
dashboard.html
<!doctype html> <html lang="en"> <head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- semantic UI -->
<link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
<!--Chart js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
{% block title %}Dashboard{% endblock title %}
{% block scripts%} <script> $(document).ready(function(){
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [{% for infringement in qs %}'{{infringement.marketplace}}',{% endfor %}],
datasets: [{
label: '% Breakdown',
data: [{% for infringement in qs %}{{infringement.id}},{% endfor %}],
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> {% endblock scripts%}
{% block content %} <canvas id="myChart" width="200" height="100"></canvas>
{% endblock %}
Views.py
class dashboard(TemplateView):
template_name = 'base/dashboard.html'
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["qs"] = Infringement.objects.all()
return context
models.py
class Infringement (models.Model):
name = models.CharField(max_length=200)
link = models.URLField(null=True, blank=True, max_length=250)
updated = models.DateTimeField(auto_now=True)
created = models.DateTimeField(auto_now_add=True)
remove = models.BooleanField(default=False)
infringer = models.ForeignKey(Infringer, on_delete=models.SET_NULL,null=True)
player = models.ForeignKey(Player, on_delete=models.SET_NULL,null=True)
status = models.ForeignKey(Status, on_delete=models.SET_NULL,null=True)
marketplace = models.ForeignKey(Marketplace, on_delete=models.SET_NULL,null=True)
groups = models.ForeignKey(Group, on_delete=models.CASCADE,default=1)
screenshot = models.ImageField(null=True, default="logo.svg")
class Meta:
ordering = ['-updated', '-created']
def __str__(self):
return self.name
График загружается, но неправильно. Это не проблема графиков. Я думаю проблема в моем запросе. Не знаю, как его настроить. Я пробовал искать запросы, но не преуспел в реализации. Я новичок в Django.
Нашел способ запросить
views.py
from django.db.models import Count
def dashboard(request):
mar_count = Marketplace.objects.annotate(infringement_count=Count('infringement'))
context= {'mar_count': mar_count}
return render(request, 'base/dashboard.html', context)
dashboard.html
{% for m in mar_count %}'{{m.infringement_count}}',{% endfor %}