Hicharts图表的使用

Posted on

Hicharts图表的使用

引用

在4.0之后就不需要jQuery了,z这里是用ajax向后台发送数据
引入js或者CDN，这里采用的是引入js的方式

在Hicarts文件中的index中查看相应的图表，查看页面的代码

1
2
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/plugins/Highcharts-5.0.12/code/highcharts.js"></script>

饼图

饼图最终就是在container中显示

加载完后通过ajax发送POST请求，后台返回数据，ajax中发送数据要携带csrf_token,在这里要注意的是是字符串形式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div id="container" style="min-width:300px;height:300px"></div> 
<script>
        $(function () {
            $.ajax({
                url: '/report.html',
                type: "POST",
                data: {'csrfmiddlewaretoken': '{{ csrf_token }}'}, {# 注意的是'{{ csrf_token }}'是字符串 #}
                dataType: 'JSON',
                success: function (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, {# 后台返回的数据 #}
                        }]
                    });
        })
    </script>

后台

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
def report(request):
    if request.permission_code == "LOOK":
        if request.method == "GET":
            return render(request, 'report.html')
        else:
            result = models.Order.objects.filter(status=3).values_list('processor__nickname').annotate(
                c=Count('id'))  # status=3代表处理的是完成的数据
            # print(result) # 这里要确nickname是唯一的
            result_list = []
            for row in result:
                result_list.append(row)
            response = {
                'pie': result_list,             
            }
            return HttpResponse(json.dumps(response))  # json dumps会把元组转化成列表

折线图

把原来的数据改造成时间戳的格式，在hicharts中只支持时间戳

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script>
       $(function () {
           $.ajax({
               url: '/report.html',
               type: "POST",
               data: {'csrfmiddlewaretoken': '{{ csrf_token }}'}, {# 注意的是'{{ csrf_token }}'是字符串 #}
               dataType: 'JSON',
               success: function (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, {# 后台返回的数据 #}
                       }]
                   });
            //折线图
           var chart = new Highcharts.Chart('container2', {
               title: {
                   text: '详细报障信息',
                   x: -20
               },
               subtitle: {
                   text: '',
                   x: -20
               },
               tooltip: {
                   valueSuffix: '个'
               },
               legend: {
                   layout: 'vertical',
                   align: 'right',
                   verticalAlign: 'middle',
                   borderWidth: 0
               },
               series: arg.zhexian,
           });
               }
           });
       })
   </script>

模拟折线图的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
def report(request):
    if request.permission_code == "LOOK":
        if request.method == "GET":
            return render(request, 'report.html')
        else:
            result = models.Order.objects.filter(status=3).values_list('processor__nickname').annotate(
                c=Count('id'))  # status=3代表处理的是完成的数据
            # print(result) # 这里要确nickname是唯一的
            result_list = []
            for row in result:
                result_list.append(row)
            response = {
                'pie': result_list,
                'zhexian': [
                    {
                        'name': 'usa',
                        'data': [
                            [150131921790.0657, 55],
                            [150132922790.0657, 35],
                            [150133923790.0657, 3],
                            [150134924790.0657, 3],
                            [150135925790.0657, 44],
                            [150136926790.0657, 6],
                            [150147927790.0657, 88]
                        ]
                    },
                    {
                        'name': 'china',
                        'data': [
                            [150131921790.0657, 35],
                            [150132922790.0657, 35],
                            [150133923790.0657, 99],
                            [150134924790.0657, 57],
                            [150135925790.0657, 444],
                            [150136926790.0657, 64],
                            [150147927790.0657, 84]
                        ]
                    },
                ]
            }
            return HttpResponse(json.dumps(response))  # json dumps会把元组转化成列表

把时间转换成时间戳

1 mysql

1
ymd_list = models.Order.objects.filter(status=3).extra(select={'ymd': "unix_timestamp(date_format(ptime,'%%Y-%%m-%%d'))"}).values('processor_id','processor__nickname','ymd').annotate(c=Count('id'))

平时比较常用的时间、字符串、时间戳之间的互相转换，虽然常用但是几乎每次使用时候都喜欢去搜索一下用法；本文将作为一个笔记，整理一下三者之间的 转换（即：date转字符串、date转时间戳、字符串转date、字符串转时间戳、时间戳转date，时间戳转字符串）用法，方便日后查看；
涉及的函数

1
2
3
4
date_format(date, format) 函数，MySQL日期格式化函数date_format()
unix_timestamp() 函数
str_to_date(str, format) 函数
from_unixtime(unix_timestamp, format) 函数，MySQL时间戳格式化函数from_unixtime
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
**时间转字符串**
select date_format(now(), '%Y-%m-%d'); 
#结果：2016-01-05 
**时间转时间戳**
select unix_timestamp(now());  
#结果：1452001082 
**字符串转时间**
select str_to_date('2016-01-02', '%Y-%m-%d %H'); 
#结果：2016-01-02 00:00:00 
**字符串转时间戳**
select unix_timestamp('2016-01-02');  
#结果：1451664000 
**时间戳转时间**
select from_unixtime(1451997924); 
#结果：2016-01-05 20:45:24 
**时间戳转字符串**
select from_unixtime(1451997924,'%Y-%d');  
//结果：2016-01-05 20:45:24

MySQL日期格式化（format）取值范围。





















































































































  值 含义
秒 %S、%s 两位数字形式的秒（ 00,01, …, 59）
分 %I、%i 两位数字形式的分（ 00,01, …, 59）
小时  %H 24小时制，两位数形式小时（00,01, …,23）
%h 12小时制，两位数形式小时（00,01, …,12）
%k 24小时制，数形式小时（0,1, …,23）
%l 12小时制，数形式小时（0,1, …,12）
%T 24小时制，时间形式（HH:mm:ss）
%r  12小时制，时间形式（hh:mm:ss AM 或 PM）
%p  AM上午或PM下午 
  周   %W 一周中每一天的名称（Sunday,Monday, …,Saturday）
 %a 一周中每一天名称的缩写（Sun,Mon, …,Sat） 
%w  以数字形式标识周（0=Sunday,1=Monday, …,6=Saturday） 
%U 数字表示周数，星期天为周中第一天
%u 数字表示周数，星期一为周中第一天
天 %d  两位数字表示月中天数（01,02, …,31）
%e   数字表示月中天数（1,2, …,31）
 %D 英文后缀表示月中天数（1st,2nd,3rd …） 
 %j 以三位数字表示年中天数（001,002, …,366） 
月 %M  英文月名（January,February, …,December） 
%b  英文缩写月名（Jan,Feb, …,Dec） 
%m  两位数字表示月份（01,02, …,12）
%c  数字表示月份（1,2, …,12） 
年 %Y  四位数字表示的年份（2015,2016…）
%y   两位数字表示的年份（15,16…）
文字输出  %文字  直接输出文字内容

参考：
http://www.jb51.net/article/103641.htm

2 sqlite

使用strftime,%%s,这里是转换成时间戳

1
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'))

使用方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
strftime()函数可以把YYYY-MM-DD HH:MM:SS格式的日期字符串转换成其它形式的字符串。 
strftime()的语法是strftime(格式, 日期/时间, 修正符, 修正符, …)
它可以用以下的符号对日期和时间进行格式化： 
%d 日期, 01-31 
%f 小数形式的秒，SS.SSS 
%H 小时, 00-23 
%j 算出某一天是该年的第几天，001-366 
%m 月份，00-12 
%M 分钟, 00-59 
%s 从1970年1月1日到现在的秒数 
%S 秒, 00-59 
%w 星期, 0-6 (0是星期天) 
%W 算出某一天属于该年的第几周, 01-53 
%Y 年, YYYY 
%% 百分号
strftime()的用法举例如下：
select strftime(‘%Y-%m-%d %H:%M:%S’,’now’,’localtime’);

参考：

http://blog.csdn.net/wihatow/article/details/53669166

前端的格式化字符串

从hichats的api手册中查看

1
2
3
4
5
6
7
8
9
xAxis: {
    type:'datetime',
    labels: {
        formatter: function () {
            return Highcharts.dateFormat("%Y-%m-%d", this.value);  //使用的是dateFormat
            //return this.value;
        }
    },
},

折线图最后处理完成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script>
     $(function () {
         $.ajax({
             url: '/report.html',
             type: "POST",
             data: {'csrfmiddlewaretoken': '{{ csrf_token }}'}, {# 注意的是'{{ csrf_token }}'是字符串 #}
             dataType: 'JSON',
             success: function (arg) {
                 //折线图
                 var chart = new Highcharts.Chart('container2', {
                     title: {
                         text: '每日详细报障信息',
                         x: -20
                     },
                     subtitle: {
                         text: '',
                         x: -20
                     },
                     legend: {
                         layout: 'horizontal',
                         align: 'center',
                         verticalAlign: 'bottom',
                         borderWidth: 1
                     },
                     xAxis: {
                         type:'datetime',
                         labels: {
                             formatter: function () {
                                 return Highcharts.dateFormat("%Y-%m-%d", this.value);
                                 //return this.value;
                             }
                         },
                         //minTickInterval:24
                     },
                     tooltip: {
                         valueSuffix: '个'
                     },
                     series: arg.zhexian,
                 });
             }
         });
     })
 </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
def report(request):
    if request.permission_code == "LOOK":
        if request.method == "GET":
            return render(request, 'report.html')
        else:
            result = models.Order.objects.filter(status=3).values_list('processor__nickname').annotate(
                c=Count('id'))  # status=3代表处理的是完成的数据
            # print(result) # 这里要确nickname是唯一的
            result_list = []
            for row in result:
                result_list.append(row)
            ymd_list = models.Order.objects.filter(status=3).extra(
                select={'ymd': "unix_timestamp(date_format(ptime,'%%Y-%%m-%%d'))"}).values('processor_id',
                                                                                           'processor__nickname',
                                                                                           'ymd').annotate(
                ct=Count('id'))
            # print(ymd_list)   # mysql 把字符串转换成时间戳 需要乘1000
            # 下面是构造成折线的数据形式 构造了一个字典，每个字典代表一类
            """
            {
                1:{name:xx,data:[[]]},
                2:{name:xx,data:[[]]},
            }
            """
            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']],]}
            response = {
                'pie': result_list,
                'zhexian': list(ymd_dict.values())  # 获取字典的values ymd_dict.values()是一个迭代器 通过list转换成列表
            }
            return HttpResponse(json.dumps(response))  # json dumps会把元组转化成列表
© 2018 Peter's Blog Center All Rights Reserved.
Theme by hiero