木易的技术记录view.py
# -*- coding: utf-8 -*-
from django.http import HttpResponse
from django.shortcuts import render
from django.db.models import *
from TestModel.models import Test,Person
from django.db.models import Count
def highcharts(request):
# query = Person.objects.all().query
# query.group_by = ['education']
# list = QuerySet(query = query, model = Person)
# list = Person.objects.all()
# list.query.group_by = ['education']
list = Person.objects.values('education').annotate(dcount=Count('education'))
return render(request, 'highcharts.html', {'list': list})
#return HttpResponse('test')模板页面
{% extends "base.html" %}
{% block mainbody %}
<div id="container" style="min-width:400px;height:400px"></div>
{% endblock %}
{% block script %}
<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '测试图表显示'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: '学历比例',
data: [
{% for cat in list %}
[
'{{ cat.education }}',
{% if cat.education > 0 %}
{{ cat.dcount }}
{% else %}
0
{% endif %}
],
{% endfor %}
]
}]
});
});
</script>
{% endblock %}
模板base.html
有一些用不上的不用管
<html>
<head>
<title>Hello World!</title>
<!-- ZUI 标准版压缩后的 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/zui/1.5.0/css/zui.min.css">
<!-- ZUI Javascript 依赖 jQuery -->
<script src="//cdn.bootcss.com/zui/1.5.0/lib/jquery/jquery.js"></script>
<!-- ZUI 标准版压缩后的 JavaScript 文件 -->
<script src="//cdn.bootcss.com/zui/1.5.0/js/zui.min.js"></script>
<script src="//cdn.bootcss.com/highcharts/5.0.7/highcharts.js"></script>
<link href="//cdn.bootcss.com/highcharts/5.0.7/css/highcharts.css" rel="stylesheet">
</head>
<body>
<h1>Hello World!</h1>
{% block mainbody %}
<p>original</p>
{% endblock %}
</body>
</html>
{% block script %}{% endblock %}