highcharts

 

 

from django.shortcuts import render, redirect,HttpResponse
from app01 import models
from rbac.service import initial_permission
import datetime
import json

def report(request):
    if request.permission_code == "LOOK":
        if request.method == "GET":
            return render(request,'report.html')
        else:
            from django.db.models import Count
            # 保证昵称不重名才正确
            result = models.Order.objects.filter(status=3).values_list("processor__nickname").annotate(ct=Count("id"))
            ymd_list = models.Order.objects.filter(status=3).extra(
                select={'ymd': "strftime('%%s',strftime('%%Y-%%m-%%d',ptime))"}).values('processor_id',
                                                                                        'processor__nickname',
                                                                                        'ymd').annotate(ct=Count('id'))
            ymd_dict = {}
            for row in ymd_list:
                key = row['processor_id']
                if key in ymd_dict:
                    ymd_dict[key]['data'].append([float(row['ymd']) * 1000, row['ct']])
                else:
                    ymd_dict[key] = {'name': row['processor__nickname'],
                                     'data': [[float(row['ymd']) * 1000, row['ct']], ]}

            ret = []
            for item in result:
                ret.append(list(item))

            response = {
                'pie': ret,
                'zhexian': list(ymd_dict.values())
            }
            return HttpResponse(json.dumps(response))

{% extends 'layout.html' %}

{% block content %}
    <div id="container" style="min-width:300px;height:300px"></div>
    <div id="container2" style="min-width:500px;height:500px"></div>
{% endblock %}

{% block js %}
    <!--利用CDN-->
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

    <script>
        $(function () {
            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });
            $.ajax({
                url: '/report.html',
                type: "POST",
                data: {'csrfmiddlewaretoken': '{{ csrf_token }}'},
                dataType: 'JSON',
                success: function (arg) {
                    console.log(arg);

                    $('#container').highcharts({
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false
                        },
                        title: {
                            text: '运维人员处理报障占比'
                        },
                        tooltip: {
                            headerFormat: '{series.name}<br>',
                            pointFormat: '{point.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: arg.pie
                        }]
                    });

                    Highcharts.chart('container2', {
                        title: {
                            text: '每日处理订单详细',
                            x: -20 //center
                        },
                        subtitle: {
                            text: '...',
                            x: -20
                        },
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom',
                            borderWidth: 1
                        },

                        xAxis: {
                            type: 'datetime',
                            dateTimeLabelFormats: {
                                month: '%Y-%m',
                                year: '%Y'
                            }
                        },

                        /*
                        xAxis: {
                            type:'datatime',
                            labels: {
                                formatter: function () {
                                    return Highcharts.dateFormat("%Y-%m-%d", this.value);
                                    //return this.value;
                                }
                            }

                        },
                        */
                        series: arg.zhexian
                    });
                }
            });


        })
    </script>
{% endblock %}