在Django错误-空白页中使用HighCharts创建饼图

我正试图用Django（用MacMaverick）创建一个饼图和highcharts，但我只得到一个空白页。我下面的代码有错误吗？ 我的数据由一个带有两个键（body和id_u计数）的字典组成，其中的循环在body标记中完美地工作。但它在脚本标记中不起作用

<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>

您有一个额外的

}）（一个来自
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)})

然后只需在模板中使用
数据：{{responses_pie_json | safe}}
JSON序列化需要一些额外的工作。
您是否也可以发布生成的javascript，即查看源代码时看到的内容，并发布视图？如何通过JSON.dumps序列化视图中的数据？抱歉，我是django新手。我在上面添加了一个示例。我正在尝试使用数据：{responses_pie_JSON | safe}，但它不是很好，它只是显示一个空白页。但是当我使用responses_pie_json|safe-in-body时，它工作正常。我该怎么办？
{% for cat in responses_pie %}    
[    
    '{{ cat.body }}',    
    {% if cat.id__count > 0 %}                                              
        {{ cat.id__count }}                                                 
    {% else %}                                                              
        0                                                                   
    {% endif %}                                                             
]{% if not forloop.last %},{% endif %}                                                                          
{% endfor %}

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)})