使用Django显示Google图表

Question

使用Django显示Google图表

djangodjango-templatesgoogle-visualization

6

我在Django中生成了一个名为data的变量，格式如下:

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轴标签出现吗？

- Sinidex

我已确认，如果删除字符串，arrayToDataTable方法也会显示。使用任一方法都可以显示多条曲线。 - Sinidex

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nelloverflow · Accepted Answer

您需要关闭结果的自动转义。可以通过添加安全过滤器来实现：

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

或者

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

我的建议是，如果你能够安装额外的包，可以使用以下其中一个封装库：

http://code.google.com/p/google-chartwrapper/（最近更新于2011年）
https://github.com/jacobian/django-googlecharts/（已归档于2017年）
https://code.google.com/p/django-graphs/（最近更新于2008年）