Question

我对谷歌图表API很新，我正在尝试将它集成到我当前的django项目中。基本上，我有一个django模板，如下所示：

<div class="container_24">
<div class="grid_24">
    {% if query %}
        <p>Results</p>

        {% for result in page.object_list %}
            <p>
                <a href="{{ result.object.get_absolute_url }}">{{ result.object.name }} {{ result.object.salary }} {{ result.object.entry }} {{ result.object.category}}</a>
            </p>
        {% empty %}
            <p>No results found.</p>
        {% endfor %}

        {% if page.has_previous or page.has_next %}
            <div>
                {% if page.has_previous %}<a href="?q={{ query }}&amp;page={{ page.previous_page_number }}">{% endif %}&laquo; Previous{% if page.has_previous %}</a>{% endif %}
                |
                {% if page.has_next %}<a href="?q={{ query }}&amp;page={{ page.next_page_number }}">{% endif %}Next &raquo;{% if page.has_next %}</a>{% endif %}
            </div>
        {% endif %}
    {% else %}
        {# Show some example queries to run, maybe query syntax, something else? #}
    {% endif %}
</div>
<div class="fclear"></div>
</div>
<div class="clear"></div>
</div>
</div>

一切都很好，我可以按预期看到我的结果。现在我按如下方式插入Google图表API：

<div class="container_24">
<div class="grid_24">
{% if query %}
    <p>Results</p>

    {% for result in page.object_list %}
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
  google.load('visualization', '1', {packages:['table']});
  google.setOnLoadCallback(drawTable);
  function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows(4);
    data.setCell(0, 0, '{{ result.object.name }}');
    data.setCell(0, 1, 10000, '$10,000');
    data.setCell(0, 2, true);
    data.setCell(1, 0, '{{ result.object.name }}');
    data.setCell(1, 1, 8000, '$8,000');
    data.setCell(1, 2, false);
    data.setCell(2, 0, '{{ result.object.name }}');
    data.setCell(2, 1, 12500, '$12,500');
    data.setCell(2, 2, true);
    data.setCell(3, 0, '{{ result.object.name }}');
    data.setCell(3, 1, 7000, '$7,000');
    data.setCell(3, 2, true);

    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(data, {showRowNumber: true});
  }
</script>
..
..
..

但是，当我执行上述操作时，我看到变量result.object.name的名称相同。也就是说，它不会循环遍历此数组。有没有办法做这样的事情：

data.setCell(0:20,0)='{{result.object.name}}'

其中0:20表示表/矩阵的行？

感谢您的时间。

Answer 1

如果我正确理解你的问题，一个选项将循环这样：

{% for n in result.object.name %}

    data.setCell({{ forloop.counter0 }}, 0, '{{ n }}');

{% endfor %}

我强烈反对你这样做，因为它很容易被JS注入，你必须逃避Javascript和你的模板。我建议使用Google Chart包装器： http://code.google.com/p/google-chartwrapper/

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

http://code.google.com/p/django-graphs/

据我所知，django-googlecharts效果很好，你可以直接在你的模板中使用标签。

django变量在谷歌图表（表）api

1 个答案: