使用Django显示Google图表

Question

我data在Django中使用以下格式生成了一个变量:

data = [['100',10],['90',9],['80',8]]

我使用render_to_response将它传递给我的模板:

return render_to_response('template.html', {
                                            'data': data,
                                            },
                                            context_instance=RequestContext(request))

在模板标题中,我调用了Google Charts来生成折线图:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Number');
  data.addColumn('number', 'Number/10');
  data.addRows( {{ data }} );

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, title: "Numbers"});
}
</script>

当我这样做时,没有显示任何内容.如果我将字符串剥离并重data试,则会显示图表,但显然没有x轴标签.

我也尝试使用arrayToDataTable函数添加数据:

var data = google.visualization.arrayToDataTable([
      ['Number', 'Number/10'],
      {% for datum in data %}
          {{ datum }},
      {% endfor %}],
      false);

但这再次无法显示任何图表.

有关如何更改以上内容之一的任何建议,或尝试其他方法来显示x轴标签？

Answer 1

您必须禁用结果的自动转义.您可以通过添加安全过滤器来执行此操作:

data.addRows( {{ data|safe }} );

要么

{% autoescape off %}
[...]
    {{ data }}
[...]
{% endautoescape %}

我的建议是,如果你可以安装其他软件包,可以使用其中一个包装器:

http://code.google.com/p/google-chartwrapper/

https://github.com/jacobian/django-googlecharts/

我无法添加两个以上的链接,但另一个链接位于此处:code.google.com/p/django-graphs/