Ajaxを使用したDjangoのハイチャート

Question

Djangoを初めて使用しています。私は世論調査のアプリケーションを作成しており、ハイチャートを使ってグラフを表示したいと考えています。私はすべての投票を表示するテンプレートを持っています。私はそれの横の投票の対応する結果をグラフの形で表示したいと思います。テンプレートの一部：

{% for question in poll_questions %} 
    <div class="col-sm-6"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-sm-12"> 
         {{question.question_text}} 
         {% for choice in question.poll_choices_set.all %} 
         <div> 
          <label><input type="radio" name="{{question.pk}}" value="{{ choice.pk }}">&nbsp {{choice.choice_text}}</label> 
         </div> 
         {% endfor %}  
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div id="{{ question.pk }}" class="chart" style="height: 400px; width: 400px"></div><br> 
     <script> 
      var question_id = '{{ question.pk }}' 
     </script> 
     <script src="{% static 'er_interface/polls.js' %}"></script> 
    </div> 
{% endfor %} 

のJavascriptファイル - polls.js：

$.getJSON('/er/poll/'+question_id ,function(data) { 
    $('#'+question_id).highcharts({ 

     chart: { 
      type: 'pie' 
     }, 
     title: { 
      text: question_id 
     }, 
     tooltip: { 
      pointFormat: ':<b>{point.y}</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: false 
       }, 
       showInLegend: true 
      }, 
      series: { 
       dataLabels: { 
        enabled: true, 
        formatter: function() { 
        return Math.round(this.percentage*100)/100 + ' %'; 
        }, 
        distance: 0, 
       } 
      } 
     }, 
     series: data 
    }); 
}); 

問題は、グラフはちょうど最後のポーリングの質問のために示されていることです。ありがとう

Answer 1

これは、それぞれのforループでquestion_idが上書きされているためです。 div Sの各を通じてページで、ループをレンダリングした後、

$('.chart').each(function() { 
    var that = this; 
    var question_id = $(this).attr('id'); 
    $.getJSON('/er/poll/'+question_id ,function(data) { 
     $(that).highcharts({ 
      ... 

そのようにして、適切なグラフを描画する：あなたは、代わりにこのような何かをしたい場合があります。

さらに良く：data-id="{{ book.id }}"を使用して$(this).data('id')で取得してください。本当に意味のないものにid属性を使用しないでください。