Django将字典传递给模板并绘制一条线

Question

我有一本字典是用英文编的视图.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，javascripts对我来说是非常新的东西，希望能得到任何帮助。
下面是代码，我尝试使用静态数据，通过隐式编写数据而不使用任何循环。如何转换它以获取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'
        }
    }
});
}

Answer 1

首先让我们从绘图开始。 我建议使用“https://plot.ly/javascript/”，这是一个非常简单的JS库，它们有很多示例。 关于将词典传递到视图中： 去视图.py，您可以将视图的model属性设置为保存数据的模型（如果有这样的模型），如下所示：

class SomePage(generic.ListView):
    template_name = 'PagesTemplate'
    model = models.TheModelName

然后，在模板中，只需使用Django标记{%object\u list%} 它将保存字典数据，建议您像这样迭代：

{% 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 %}

第二个选项，如果数据不是使用模型存储的： 使用“extra\u content”视图内置属性并在其中插入字典，如下所示：

    class SomePage(sometypeofview):
          extra_context = {'your_extra_data': your_extra_data}

然后，在模板本身中访问它，如下所示：

<h1>{{ your_extra_data}} </h1>

这里h1只是一个例子，把它放在任何你想要的标签里。你知道吗