Django-将字典传递给模板并绘制折线图

时间:2019-06-02 10:24:21

标签: javascript python json django

我在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'
        }
    }
});
}

1 个答案:

答案 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只是一个示例,将其放在您想要的任何标记中。