Hicharts图表的使用

Hicharts图表的使用

引用

在4.0之后就不需要jQuery了,z这里是用ajax向后台发送数据

引入js或者CDN，这里采用的是引入js的方式

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

    <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,在这里要注意的是是字符串形式

<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>

后台

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中只支持时间戳

 <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>

模拟折线图的数据

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

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，时间戳转字符串）用法，方便日后查看；

涉及的函数

date_format(date, format) 函数，MySQL日期格式化函数date_format()
unix_timestamp() 函数
str_to_date(str, format) 函数
from_unixtime(unix_timestamp, format) 函数，MySQL时间戳格式化函数from_unixtime

**时间转字符串**
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,这里是转换成时间戳

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

使用方式：

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手册中查看

xAxis: {
    type:'datetime',
    labels: {
        formatter: function () {
            return Highcharts.dateFormat("%Y-%m-%d", this.value);  //使用的是dateFormat
            //return this.value;
        }
    },
},

折线图最后处理完成

   <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>

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会把元组转化成列表