用Django的HighCharts创建饼图错误 - 空白页

Question

我想用Django创建一个饼图（用Mac Maverick），但我只是得到一个空白页。我的代码下面有一些错误吗？ 我的数据由一个带有2个键（body和id__count）的字典组成，它内部的循环在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> 

这是在脚本标签上的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序列化的一些额外工作。