django和morris.js图表​​：不显示图表

Question

我正试图在django中使用morris图表。我有以下代码，但在加载页面时它没有显示图表。

  var bar = new Morris.Bar({
  element: 'bar-chart',
  resize: true,
  data: [
    {% for item in data %}
{ period: '{{ item.period }}', addition: '{{ item.addition }}', depreciation: '{{ item.depreciation }}' }{% if not forloop.last %},{% endif %}
    {% endfor %}
  ],
  barColors: ['#00a65a', '#f56954'],
  xkey: 'period',
  ykeys: ['addition', 'depreciation'],
  labels: ['Addition', 'Depreciation'],
  hideHover: 'auto'
});

这就是我在django视图中的内容：

def index(request):

mydata = []
mydata = ADRAnalysis.objects.values_list('period', 'addition', 'depreciation').filter(period__in=['Jan-2016', 'Feb-2016', 'Mar-2016'])

return render(request, 'app/index.html', {'data': mydata,}) 

在Python中，我得到了数据：

>>> mydata
<QuerySet [('Jan-2016', 110.01, 50.74), ('Feb-2016', 235.16, 50.33), ('Mar-2016', 117.74, 52.63)]>
>>>

我不确定为什么它没有加载数据。有人可以帮助指出我做错了什么或应该如何正确完成？