我在views.py中生成了一个字典,看起来像这样,但是有n个企业
{ enterprise1: {'Year': ['2014/2015', '2016/2017', '2013/2014'],
'no_per_year': [16, 8, 6]},
enterprise2: {'Year': ['2016/2017', '2013/2014', '2014/2015'],
'no_per_year': [2, 16, 11]},
enterprise3: {'Year': ['2016/2017', '2013/2014', '2015/2016'],
'no_per_year': [19, 7, 14]},
....
....
....
}
如何将此词典传递给模板,并绘制线形图,描绘每个企业及其每年招收的学生人数。
Json,javascript对我来说是非常新的东西,不胜感激。
下面是代码,我尝试通过静态写入数据而没有任何循环来处理静态数据。如何将其转换为n个企业的数据并进行绘图?
{% extends "base.html" %}
{% load static %}
<script>
{% block jquery %}
$.ajax({
success: function(data) {
setchart()
setchart2()
},
error: function(error_data){
console.log("error")
console.log(error_data)
}
})
prgcolorset = [
'rgba(73,170,30,0.4)',
'rgba(50, 106, 21,0.4)',
'rgba(219, 58, 29,0.4)',
'rgba(150, 58, 29, 0.4)',
'rgba(60, 206, 209, 0.4)',
'rgba(60, 157, 209, 0.4)',
'rgba(60, 90, 209, 0.4)',
'rgba(280, 243, 36, 0.4)',
'rgba(230, 243, 36, 0.4)',
]
prgcolorborderset =[
'rgba(73,170,30,1)',
'rgba(50, 106, 21,1)',
'rgba(219, 58, 29, 1)',
'rgba(150, 58, 29, 1)',
'rgba(60, 206, 209, 1)',
'rgba(60, 157, 209, 1)',
'rgba(60, 90, 209, 1)',
'rgba(280, 243, 36, 1)',
'rgba(230,243, 36, 1)',
]
function setchart() {
var ctx = document.getElementById('myChart').getContext('2d');
ctx.shadowBlur=20;
ctx.shadowColor="black";
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels:{{ enterpYear }} ,
datasets: [
{
label: '{{ check|safe }}',
data: {{ enterpQTD1 }},
//backgroundColor: prgcolorset ,
borderColor: prgcolorborderset,
borderWidth: 1,
fill: false
},
{
label: 'Ent2',
data: {{ enterpQTD2 }},
//backgroundColor: prgcolorset ,
borderColor:'#26c6da',
borderWidth: 1,
fill: false,
borderDash: [10,5]
},
{
label: 'Ent3',
data: {{ enterpQTD3 }},
//backgroundColor: prgcolorset ,
borderColor:'#5c6bc0',
borderWidth: 1,
fill: false,
//borderDash: [10,5]
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
title: {
display: false,
text: 'Students per year'
},
legend: {
display: true,
position:'bottom',
},
tooltips: {
mode: 'x'
}
}
});
}
答案 0 :(得分:1)
首先让我们开始绘制。 我建议使用“ https://plot.ly/javascript/”,这是一个非常简单的JS库,并且有很多示例。 关于将字典传递到视图中: 转到views.py,您可以将视图的模型属性设置为保存数据的模型(如果有这样的模型),就像这样:
assert self.route.segment_validate(self.departure_id, self.destination_id, self.pk), ('Impossible to add the segment, please check the route!')
然后,在您的模板中,只需使用Django标签'{%object_list%}' 将保存字典数据,始终建议像这样迭代它:
class SomePage(generic.ListView):
template_name = 'PagesTemplate'
model = models.TheModelName
第二个选项,如果您的数据不是使用模型存储的: 使用“ extra_content”视图内置属性并在其中插入字典,就像这样:
{% for singleObject in object_list %}
{% if not forloop.first %},{% endif %} # this is how you access your loops meta data (such as counters go to https://docs.djangoproject.com/en/2.2/ref/templates/builtins/ for more information #
{
someattribute: "{{ singleObject.someattribute }}",
.
.
.
}
{% endfor %}
然后,像这样在模板本身中访问它:
class SomePage(sometypeofview):
extra_context = {'your_extra_data': your_extra_data}
这里h1只是一个示例,将其放在您想要的任何标记中。