我正在尝试使用chart.js将数据可视化为图形! 然而,我不知道这是怎么做到的。。。 你能帮我解决这个问题吗
这是我到目前为止的代码 model.py
class MarksInputOne(models.Model):
user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, null=True)
date = models.DateTimeField(auto_now_add=True)
mark = models.CharField(max_length=200)
def __str__(self):
return self.mark
views.py
def courseOne(request):
marks = MarksInputOne.objects.filter(user=request.user)
total_assign = TodoList.objects.filter(user=request.user)
total = total_assign.count()
this = total_assign.filter(category__name="MAT292H1").count()
return render(request, 'courses/firstcourse.html', {'marks': marks, 'total_assign': total_assign, 'total': total,
'this': this})
def lineChart(request):
labels =[]
data = []
queryset = MarksInputOne.objects.values('mark').filter(category__name='MAT292H1').order_by('date')
for entry in queryset:
labels.append(entry['date'])
data.append(entry['mark'])
return JsonResponse(data={
'labels': labels,
'data': data,
})
最后是chart.html,这实际上是chart.js中的一个示例代码
<div class="col">
<div class="col-md">
<h5>Graph</h5>
<hr>
<div class="card card-body">
<canvas id="chart" width="800" height="400"></canvas>
<script>
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [{{data}}],
datasets: [{
label: 'Academic Performance',
data: [{{ labels }}],
fill: false,
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: [
'rgb(255,99,132)',
'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: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</div>
</div>
</div>
请帮助我实现图表上的数据! 我在网上搜索了很长时间,什么也没找到:()
谢谢你的帮助
{}关心的只是标签列表和值列表。所以你必须以某种方式提供它。您的
lineChart
view函数以标签列表和数据点列表响应,因此它完全符合我们的需要。您需要做的是让您的网页向django服务器发送请求,请求它应该显示的数据。收到响应后,您可以将数据输入到chart.js
并构建图表。下面是一个精简的代码,说明了所有这些是如何从客户端和服务器端结合在一起的:服务器端
客户端
我要指出的一点是,我们在这里使用的不同语言以及它们之间的交互方式。Django呈现一个HTML页面。在这个呈现过程中,它可以访问名为
context variables
的python变量。渲染完成后,它将最后一个HTML页面发送给客户端。客户端是chart.js
,它是一个JavaScript库,需要使用JavaScript变量。所以使用Django的context variables
不会真正起作用除非。。。您可以使用django将其上下文变量作为硬编码javascript有效值呈现到html页面中。我对过去这样做感到内疚,但我不推荐这种方法。闻起来很难闻相关问题 更多 >
编程相关推荐