Googleグラフ（テーブル）のdjango変数api

Question

Google Chart 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のチャートラッパーを使用している： http://code.google.com/p/google-chartwrapper/

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

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

限り私はジャンゴ・googlechartsを覚えているように非常にうまく機能し、あなたに直接タグを使用することができますあなたのテンプレート。