Chart.js集成到Django项目 [英] Chart.js integration to Django project
问题描述
Charts.js和Django的新功能.似乎我可以使它正常工作,但是却不如我所希望的那样好.想要整合在Django端进行的两个计算:
New to Charts.js and Django. Seems like I make it working, but not as good as I want it to. Would like to integrate two calculations made on Django side:
我的views.py:
my views.py:
def graph(request):
bug_all = BugTable.objects.filter()
bug_all_total = bug_all.count()
bug_posted = BugTable.objects.filter(
status=BugTable.BUG_POSTED)
bug_posted_total = bug_posted.count()
context = {'bug_all_total': bug_all_total,
'bug_posted_total': bug_posted_total}
return render(request, 'graph.html', context)
我的graphs.html
my graphs.html
<canvas id="Bug-status-bar" class="col-md-6"></canvas>
<script THERE GOES CHART CDN LINK></script>
<script type="text/javascript">
var ctx = document.getElementById('Bug-status-bar');
var dataArray = [{{bug_all_total|safe}}, {{bug_posted_total|safe}}]
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['All', 'Posted', 'Pending', 'Fixed'],
datasets: [{
label: 'Statistic on bug activity',
data: dataArray,
backgroundColor: [
'rgba(255, 99, 132, 0.4)'
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)'
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
当我将其中一个元素(bug_all_total或bug_posted_total)放入graph.html数据部分时,它可以正常工作,但是由于某些原因,如果我将它们都放进去,它将不起作用.有什么建议吗?感谢您的帮助.
When I put one of those elements (bug_all_total or bug_posted_total) to graph.html data section it works fine, but for some reasons it does not work if i put both of them. Any suggestions why? Any help is appreciated.
推荐答案
一切看起来不错,在 rgba
字符串之后,您只是缺少了几个逗号.
Everything looks good, you are simply missing a few commas after the rgba
strings.
尝试以下方法:
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['All', 'Posted', 'Pending', 'Fixed'],
datasets: [{
label: 'Statistic on bug activity',
data: dataArray,
backgroundColor: [
'rgba(255, 99, 132, 0.4)', // <----
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)', // <---
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
这篇关于Chart.js集成到Django项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!