带有谷歌图表的 Django答案

【问题标题】：Django with google charts带有谷歌图表的 Django
【发布时间】：2013-07-18 12:36:46
【问题描述】：

我试图在我的页面上显示谷歌图表，但我不知道如何将值从 django 视图传递到 javascript，以便我可以绘制图表。

Django 代码：

array = ([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);
args['array']= array
return render_to_response('progress.html',args)

progres.html：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var djangoData = '{{array}}';
    var data = google.visualization.arrayToDataTable(djangoData);

    var options = {
      title: 'Company Performance'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

这样，图表就不会显示。有什么建议么？

【问题讨论】：

标签： javascript python django google-visualization

【解决方案1】：

google.visualization.arrayToDataTable() 似乎采用 2D (javascript) 数组。你传递的是一个字符串。您需要将其解析为数组。试试：

var djangoData = JSON.parse('{{ array }}');
var data = google.visualization.arrayToDataTable(djangoData);

【讨论】：

【解决方案2】：

在您的观点中：

删除这一行args['array']= array

将这一行 return render_to_response('progress.html',args) 改为 return render_to_response('progress.html',{'array': json.dumps(array)})

在您的模板中：

将这一行 var djangoData = '{{array}}'; 改为 var djangoData = '{{ array | safe }}';

您的代码的其余部分都很好。我希望这会有所帮助。

【讨论】：

【解决方案3】：

对我来说，这种组合很有效：

查看：

from django.shortcuts import render
import json

(...)
context= {'array': json.dumps(array)}
return render(request,'progress.html',context)

模板：

var djangoData = JSON.parse('{{ array | safe }}';);

【讨论】：