统计图表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>

</head>
<body>
<div id="container"></div>

<script>
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });

     $(function(){

        initChart();

    });

    function initChart() {
        var config = {
            chart: {
                type: 'spline'
            },
            title: {
                text: '动态模拟实时数据'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: '值'
                },
                plotLines: [{
                    value: 0,
                     1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                            Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: true
            },
            exporting: {
                enabled: false
            },
            series: [
                {
                    name: 'A',
                    data: [
                        [1491535949788.035, 7.0],
                        [1491535949888.035, 6.0],
                        [1491535949988.035, 10.0],
                        [1491535950088.035, 1.0]
                    ]
                },
                {
                    name: 'B',
                    data: [
                        [1491535949788.035, 8.0],
                        [1491535949888.035, 2.0],
                        [1491535949988.035, 40.0],
                        [1491535950088.035, 1.0]
                    ]
                }
                ,
                {
                    name: 'C',
                    data: [
                        [1491535949788.035, 10.0],
                        [1491535949888.035, 2.0],
                        [1491535949988.035, 10.0],
                        [1491535950088.035, 8.0]
                    ]
                }

            ]
        }

{#        $('#container').highcharts(config)#}

        //获取数据库的数据，通过ajax，再将字典config中的series替换成arg即可
      $.ajax({
            url: '/backend/trouble-json-report.html',
            dataType: 'json',
            success:function(arg){
                config['series'] = arg;
                $('#container').highcharts(config);
            }
        })

    }
</script>
</body>
</html>

统计图表前端部分

def trouble_json_report(request):
    # 数据库中获取数据
    user_type_id=2#假如id为2的是处理人
    user_list = models.UserInfo.objects.filter()#获取所有处理人
    response = []
    for user in user_list:
        from django.db import connection, connections
        cursor = connection.cursor()
        #每个人每个月处理订单的数量，转换成时间戳必须要是年月日，再用一次strftime加上%%s
        cursor.execute("""select strftime('%%s',strftime("%%Y-%%m-01",ctime)) * 1000,count(id) from repository_trouble where processer_id = %s group by strftime("%%Y-%%m",ctime)""", [user.nid,])
        result = cursor.fetchall()#【(时间，数量),(),()】
        print(user.username,result)
        temp = {
            'name': user.username,
            'data':result
        }
        response.append(temp)
    import json
    return HttpResponse(json.dumps(response))

统计图表后端部分

Java学习内容