Highcharts in Django mit Ajax

Question

Ich bin neu in Django. Ich mache Abstimmungsanträge und möchte Highcharts zur Anzeige von Graphen verwenden. Ich habe eine Vorlage, die alle Umfragen anzeigt. Ich möchte die entsprechenden Ergebnisse der Umfrage daneben in Form von Diagramm zeigen. Ein Teil der Vorlage:

{% 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 datei 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 
    }); 
}); 

Das Problem ist, dass Graph nur für die letzte Umfrage Frage gezeigt. Danke

Answer 1

Dies ist, weil in jedem der for-Schleifen question_id überschrieben wird.

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

Auf diese Weise nach dem Rendern der Seite, Sie Schleife durch jede der div s und machen das entsprechende Diagramm: Sie könnte so etwas wie diese stattdessen tun wollen.

Noch besser: Verwenden Sie data-id="{{ book.id }}" und abrufen Sie es mit $(this).data('id') tun vermeiden Sie die ID-Attribut für etwas, für das es nicht wirklich gemeint ist.