HigntChats之应用举例

Posted 2020-10-31 weigege2015

报障单之报表管理，应用HigntChats例子：

1. 前端html：

 1 {% extends "layout.html" %}
 2 
 3 {% block content %}
 4 <div id="container" style="min-width:400px;height:400px"></div>
 5 
 6 {% endblock %}
 7 
 8 
 9 {% block js %}
10 <script src="/static/jquery-3.3.1.js"></script>
11 <script src="/static/Highcharts-6.0.7/code/highcharts.js"></script>
12  <script>
13     $.ajax({                          
14         url:"/report.html",
15         type:"post",
16         data:{"csrfmiddlewaretoken":"{{ csrf_token }}"},
17         dataType:"JSON",
18         success:function(arg){                                     # 用ajax从后台请求的数据arg成为hightChats的js中data的值
19                 $(‘#container‘).highcharts({
20         chart: {
21             plotBackgroundColor: null,
22             plotBorderWidth: null,
23             plotShadow: false
24         },
25         title: {
26             text: ‘2014 运维人员处理报障单比率‘
27         },
28         tooltip: {
29             headerFormat: ‘{series.name}<br>‘,
30             pointFormat: ‘{point.name}: <b>{point.percentage:.1f}%</b>‘
31         },
32         plotOptions: {
33             pie: {
34                 allowPointSelect: true,
35                 cursor: ‘pointer‘,
36                 dataLabels: {
37                     enabled: true,
38                     format: ‘<b>{point.name}</b>: {point.percentage:.1f} %‘,
39                     style: {
40                         color: (Highcharts.theme &&   Highcharts.theme.contrastTextColor) || ‘black‘
41                     }
42                 }
43             }
44         },
45         series: [{
46             type: ‘pie‘,
47             name: ‘处理报障单比率‘,
48             data: arg.pie
49         }]
50     });
51         }
53 
54     })
55 </script>
59 {% endblock %}

2. 后台views.py

 1 def report(request):
 2     if request.method == "GET":
 3         return render(request, "report.html")
 4     else:
 5         result = models.Order.objects.filter(status=3).values("processor_id", "processor__nickname").annotate(ct=Count("id"))
 6         """
 7         result=[{"processor_id":1, "processor__nickname":"sw", "ct":2}]
 8         """
 9         # 将 result转化成response形式
10         """
11            response = {
12             "pie":[
13                 ["alex", 40],
14                 ["egon", 10],
15             ]
16         }
17         """
18         response = {"pie": []}
19         msg_list = []
20         for row in result:
21             msg_list.append(row["processor__nickname"])
22             msg_list.append(row["ct"])
23             response["pie"].append(msg_list)
24             msg_list = []
25         print(response)
26         return HttpResponse(json.dumps(response))