[英]How to plot Django data on a Chart.js graph?
I am so tilted, so so so tilted.我是如此倾斜,如此如此倾斜。 Been trying to work chart.js for a while now on my website I built with Django.
在我用 Django 构建的网站上尝试使用 chart.js 有一段时间了。 I want to plot two fields: Dates and Scores.
我想 plot 两个字段:日期和分数。 Dates is a date such as 1/6/2022, score is a float.
Dates 是一个日期,例如 1/6/2022,score 是一个浮点数。 My issue is that when I pass through the python list to the script it pretends it's something disgusting.
我的问题是,当我将 python 列表传递给脚本时,它假装它很恶心。 But when I copy and past the list and put it into the chart's data it's fine.
但是当我复制并通过列表并将其放入图表的数据中时,这很好。 It only doesn't work when it thinks it's a variable which just makes no sense at all and I can't find anywhere that is talking about this.
只有当它认为它是一个完全没有意义的变量并且我找不到任何谈论这个的地方时,它才不起作用。
views.py视图.py
def progress(response):
lessons = StudentLessons.objects.get(name=response.user.email)
scores = []
dates = []
for lesson in lessons.lesson_set.all():
dates.append(str(lesson.date))
scores.append(str((lesson.accuracy+lesson.speed+lesson.understanding)/3))
context = {
'dates':dates,
'scores':scores,
}
return render(response, "main/progress.html", context)
dates = ['2022-09-27', '2022-09-28'] scores = ['4.333333333333333', '6.0'] (from console) html that displays the correct chart日期 = ['2022-09-27', '2022-09-28'] 分数 = ['4.333333333333333', '6.0'] (来自控制台)显示正确图表的 html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
<script type="text/javascript">
var myChart = new Chart("myChart",{
type:"line",
data: {
labels: ['2022-09-27', '2022-09-28'],
datasets:[{
borderColor: "rgba(0,0,0,0.1)",
data: ['4.333333333333333', '6.0']
}]
},
options:{
responsive: true,
legend: {
position: 'top',
},
}
});
</script>
html that doesn't work html 不工作
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
<script type="text/javascript">
var myChart = new Chart("myChart",{
type:"line",
data: {
labels: {{dates}},
datasets:[{
borderColor: "rgba(0,0,0,0.1)",
data: {{scores}}
}]
},
options:{
responsive: true,
legend: {
position: 'top',
},
}
});
</script>
Any help will be sincerely appreciated, this is driving me insane and it's literally the last thing I need to do.任何帮助将不胜感激,这让我发疯,这实际上是我需要做的最后一件事。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.