django,highcharts,mysql示例

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

 

木易的技术记录 » django,highcharts,mysql示例

顶 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

置顶文章