Создайте круговую диаграмму с ошибкой HighCharts в Django - Пустая страница

Question

Я пытаюсь создать круговую диаграмму с высокими диаграммами с Django (с Mac Maverick), но я просто получаю пустую страницу. Есть ли ошибка в моем коде ниже? Мои данные состоят из словаря с 2 ключами (body и id__count), цикл внутри которого отлично работает в теге тела. Но он не работает в теге скрипта.

<script> 
function numberWithCommas(x) { 
    var parts = x.toString().split("."); 
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
    return parts.join("."); 
} 

$(function() { 
    var chart;  
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'categoryPieChart' 
      },title: { 
       text: 'Category' 
      },tooltip: { 
       formatter: function() { 
        return '<b>'+ this.point.name +'</b>: '+ numberWithCommas(this.y.toFixed(2)); 
       } 
      },exporting: { 
       enabled: false 
      },plotOptions: { 
       pie: { 
        dataLabels: { 
         enabled: true, 
          formatter: function() { 
           return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' %'; 
          } 
         } 
        } 
       },series: [{ 
        type: 'pie', 
        data: [ 
         {% for cat in responses_pie %} 
         [ 
          '{{ cat.body }}', 
          {% if cat.id__count > 0 %} 
           {{ cat.id__count }} 
          {% else %} 
           0 
          {% endif %} 
         ], 
         {% endfor %} 
        ] 
       }] 
      }); 
     }); 
    }); 
}); 
</script> 

Это просмотреть исходный код на Chrome в тэгом:

function numberWithCommas(x) { 
    var parts = x.toString().split("."); 
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
    return parts.join("."); 
} 

$(function() { 
    var chart;  
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'categoryPieChart' 
      },title: { 
       text: 'Category' 
      },tooltip: { 
       formatter: function() { 
        return '<b>'+ this.point.name +'</b>: '+ numberWithCommas(this.y.toFixed(2)); 
       } 
      },exporting: { 
       enabled: false 
      },plotOptions: { 
       pie: { 
        dataLabels: { 
         enabled: true, 
          formatter: function() { 
           return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' %'; 
          } 
         } 
        } 
       },series: [{ 
        type: 'pie', 
        data: [ 

         [ 
          'apple', 

           2 

         ], 

        ] 
       }] 
      }); 
     }); 
    }); 
}); 

И мое мнение (views.py)

def piechart(request): 
    responses_pie = AnswerRadio.objects.values("body").annotate(Count("id")) 
    return render(request, 'chart_code_v2.html', {'responses_pie': responses_pie}) 

Answer 1

У вас есть дополнительные }); в конце (один от Highcharts.Chart({, один от $(document).ready(function() {, один от $(function() { и один слишком много). Это должно быть видимым как синтаксическая ошибка в вашей консоли javascript.

Кроме того, вызов $(document).ready(fn) является излишним, потому что $(fn), который вы используете для функции вокруг него, является сокращением для $(document).ready(fn).

Если вы планируете поддерживать старые версии Internet Explorer, вам также необходимо удалить последнюю запятую из ваших данных, например, так:

{% for cat in responses_pie %}  
[  
    '{{ cat.body }}',  
    {% if cat.id__count > 0 %}            
     {{ cat.id__count }}             
    {% else %}                
     0                 
    {% endif %}                
]{% if not forloop.last %},{% endif %}                   
{% endfor %} 

Вообще, лучше сериализовать данные в представлении через json.dumps и передать строку в шаблон, так как она менее подвержена ошибкам. Например:

import json 

def piechart(request): 
    responses_pie = AnswerRadio.objects.values("body").annotate(Count("id")) 
    res = [] 
    for cat in responses_pie: 
     res.append([ 
      cat.body, 
      cat.id__count, 
      # ... more stuff 
     ]) 
    return render(request, 'chart_code_v2.html', {'responses_pie_json': json.dumps(res)}) 

затем просто используйте data: {{ responses_pie_json|safe }} в вашем шаблоне. Имейте в виду, что некоторые объекты Python (datetime, Decimal, ...) нуждаются в дополнительной работе для сериализации JSON.