报障系统之报表
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))