HigntChats应用举例--报表

报障系统之报表

1.html

  1 {% extends "layout.html" %}
  2 
  3 {% block content %}
  4 <div id="container" style="min-400px;height:400px"></div>   <!-- 饼图-->
  5 <div id="container2" style="min-400px;height:400px"></div>      <!-- 折线图-->
  6 
  7 {% endblock %}
  8 
  9 
 10 {% block js %}
 11 <script src="/static/jquery-3.3.1.js"></script>
 12 <script src="/static/Highcharts-6.0.7/code/highcharts.js"></script>
 13     <script>
 14          $(function () {
 15             Highcharts.setOptions({
 16                 global: {
 17                     useUTC: false
 18                 }
 19             });
 20             $.ajax({
 21                 url: '/report.html',
 22                 type: "POST",
 23                 data: {'csrfmiddlewaretoken': '{{ csrf_token }}'},
 24                 dataType: 'JSON',
 25                 success: function (arg) {
 26                     console.log(arg);
 27 
 28                     $('#container').highcharts({
 29                         chart: {
 30                             plotBackgroundColor: null,
 31                             plotBorderWidth: null,
 32                             plotShadow: false
 33                         },
 34                         title: {
 35                             text: '运维人员处理报障占比'
 36                         },
 37                         tooltip: {
 38                             headerFormat: '{series.name}<br>',
 39                             pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
 40                         },
 41                         plotOptions: {
 42                             pie: {
 43                                 allowPointSelect: true,
 44                                 cursor: 'pointer',
 45                                 dataLabels: {
 46                                     enabled: true,
 47                                     format: '<b>{point.name}</b>: {point.percentage:.1f} %',
 48                                     style: {
 49                                         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
 50                                     }
 51                                 }
 52                             }
 53                         },
 54                         series: [{
 55                             type: 'pie',
 56                             name: '运维人员处理报障占比',
 57                             data: arg.pie
 58                         }]
 59                     });
 60 
 61                     Highcharts.chart('container2', {
 62                         title: {
 63                             text: '每日处理订单详细',
 64                             x: -20 //center
 65                         },
 66                         subtitle: {
 67                             text: '...',
 68                             x: -20
 69                         },
 70                         legend: {
 71                             layout: 'vertical',
 72                             align: 'right',
 73                             verticalAlign: 'middle',
 74                             borderWidth: 0
 75                         },
 76                         xAxis:{
 77                             labels:{
 78                                 formatter:function(){
 79                                     return Highcharts.dateFormat("%Y-%m-%d",this.value); // dateformat为higntchats内的时间格式化函数
 80                                     //return this.value;
 81                                 }
 82                             },
 83                             minTickInterval:24
 84                         },
 85                         series: arg.zhexian
 86                     });
 87                 }
 88             });
 89 
 90 
 91 
 92         })
 93 
 94 
 95 
 96 
 97 
 98 
 99 
100 
101 
102 
103     </script>
104 
105 
106 
107 {% endblock %}

2. views.py

 1 def report(request):
 2     if request.method == "GET":
 3         return render(request, "report.html")
 4     else:
 5         # 饼图
 6         result = models.Order.objects.filter(status=3).values("processor_id", "processor__nickname").annotate(ct=Count("id"))
 7         """
 8         result=[{"processor_id":1, "processor__nickname":"sw", "ct":2}]
 9         """
10         # 将 result转化成response形式
11         """
12            response = {
13             "pie":[
14                 ["alex", 40],
15                 ["egon", 10],
16             ]
17         }
18         """
19         response = {"pie": []}
20         msg_list = []
21         for row in result:
22             msg_list.append(row["processor__nickname"])
23             msg_list.append(row["ct"])
24             response["pie"].append(msg_list)
25             msg_list = []
26             # 分组：select * from xx group by processor_id,ptime(2017-11-11)
27             # 折线图  # "strftime('%%s'，2017-02-01） 将2017-02-01转换成时间戳
28             ymd_list = models.Order.objects.filter(status=3).extra(
29                 select={'ymd': "strftime('%%s',strftime('%%Y-%%m-%%d',p_time))"}).values('processor_id',
30                                                                                         'processor__nickname',
31                                                                                         'ymd').annotate(ct=Count('id'))
32             ymd_dict = {}
33             for row2 in ymd_list:
34                 key = row2['processor_id']
35                 if key in ymd_dict:
36                     ymd_dict[key]['data'].append([float(row2['ymd']) * 1000, row2['ct']])
37                 else:
38                     ymd_dict[key] = {'name': row2['processor__nickname'],
39                                      'data': [[float(row2['ymd']) * 1000, row2['ct']], ]}
40             response["zhexian"] = list(ymd_dict.values())  # ymd_dict.values()是个迭代器 要list一下，不然要迭代一下才能取值
41 
42         return HttpResponse(json.dumps(response))