Highcharts （后台数据线形统计）使用实例

最新推荐文章于 2018-05-03 10:04:05 发布

woshihaiyong168

最新推荐文章于 2018-05-03 10:04:05 发布

阅读量1k

点赞数

分类专栏： laravel框架 php

本文链接：https://blog.csdn.net/woshihaiyong168/article/details/69055470

版权

php 同时被 2 个专栏收录

61 篇文章 1 订阅

订阅专栏

laravel框架

32 篇文章 0 订阅

订阅专栏

效果实现：

插件地址：插件demo

插件教程：插件教程

实现步骤：

1、选择好符合业务需求的demo 将js文件打包到项目中去直接引用

2、显示页面

<!doctype html>
<html lang="en">
@include('layouts.head')
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>同时在线人数统计</title>
</head>
<body>
<div class="row">
    <form action="{{action('Home\ChartController@getMeanWhileOnlineData')}}" method="post">
        <div class="col-md-6 form-inline">
            <div class="form-group form-inline">
                <label for="">对比时间</label>
                <input type="text" name="start_time" id="start_time" class="form-control form_date" value="{{$data['start_time']}}" readonly >
            </div>
            <div class="form-group form-inline">
                <label for="">对比时间</label>

                <input type="text" name="end_time" id="end_time" class="form-control form_date" value="{{$data['end_time']}}" readonly >
            </div>
        </div>
        <div class="col-md-3 form-inline">
            <div class="form-group form-inline">
                <input type="submit" class="btn btn-sm btn-primary" value="查询"/>
            </div>
            <div class="form-group form-inline">
                {{--<a href="{{action('ExcelController@export')}}"  class="btn btn-sm btn-primary" >导出</a>--}}
                {{--<input id="export" type="button" class="btn btn-sm btn-primary" value="导出"/>--}}
            </div>
        </div>
    </form>
</div>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
<script type="text/javascript">
        $('.form_date').datetimepicker({
            language: 'zh-CN', /*加载日历语言包，可自定义*/
            weekStart: 1, /*星期*/
            todayBtn: 0, /*当天*/
            autoclose: true,//选中之后自动隐藏日期选择框
            todayHighlight: 1, /*今天高亮显示*/
            startView: 2, /*4年3月2日1小时*/
            minView: 2, /*0分1小时2天*/
            format: 'yyyy-mm-dd',
            forceParse: 0,
            showMeridian:true
        });
</script>
<script src="{{ URL::asset('/js/highcharts.js') }}"></script>
<script src="{{ URL::asset('/js/exporting.js') }}"></script>
<script>
    Highcharts.setOptions({
        lang:{
            contextButtonTitle:"图表导出菜单",
            decimalPoint:".",
            downloadJPEG:"下载JPEG图片",
            downloadPDF:"下载PDF文件",
            downloadPNG:"下载PNG文件",
            downloadSVG:"下载SVG文件",
            drillUpText:"返回 {series.name}",
            loading:"加载中",
            months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
            noData:"没有数据",
            numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
            printChart:"打印图表",
            resetZoom:"恢复缩放",
            resetZoomTitle:"恢复图表",
            shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
            thousandsSep:",",
            weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期天"]
        }
    });
    Highcharts.chart('container', {
        chart: {
            type: 'spline'
        },
        title: {
            text: '累计在线人数统计图'
        },
        subtitle: {
            text: '线形统计'
        },
        xAxis: {
            categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
        },
        yAxis: {
            title: {
                text: '累计在线人数'
            },
            labels: {
                formatter: function () {
                    return this.value + '人';
                }
            }
        },
        tooltip: {
            crosshairs: true,
            shared: true
        },
        credits: {
             enabled:false,                    // 默认值，如果想去掉版权信息，设置为false即可
        },
        plotOptions: {
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1
                }
            }
        },
        series: [{
            name: '{{$data['start_time']}}',
            marker: {
                symbol: 'square'
            },
            data:[{{$data['previous_data']}}]
        }, {
            name: '{{$data['end_time']}}',
            marker: {
                symbol: 'diamond'
            },
            data: [{{$data['current_data']}}]
        }]
    });
</script>
</html>

后台

 /**
     * 5、用户同时在线人数
     * @param Request $request
     * @return $this
     */
    public function meanWhileOnlineView(Request $request){
        $hour=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
        $data['start_time'] = $request->input('start_time', date('Y-m-d',strtotime("-1 day")));
        $data['end_time'] = $request->input('end_time', date('Y-m-d'));
        $current_data = [];
        $previous_data = [];
        $previous= OnlineUser::select(DB::raw("date_format(create_time,'%H') as hour"),DB::raw("count(id) as sum"))
            ->where('create_time','>=',date('Y-m-d 00:00:00',strtotime($data['start_time'])))
            ->where('create_time','<=',date('Y-m-d 23:59:59',strtotime($data['start_time'])))
            ->groupBy('hour')
            ->get();
        $current=OnlineUser::select(DB::raw("date_format(create_time,'%H') as hour"),DB::raw("count(id) as sum"))
            ->where('create_time','>=',date('Y-m-d 00:00:00',strtotime($data['end_time'])))
            ->where('create_time','<=',date('Y-m-d 23:59:59',strtotime($data['end_time'])))
            ->groupBy('hour')
            ->get();
        if($previous->count()>0){
            foreach($hour as $key=>$value){
                foreach($previous as $k=>$v){
                    if($value==$v->hour){
                        $previous_data[$value] = $v->sum;
                        break;
                    }else{
                        $previous_data[$value] = 0;
                    }
                }
            }
        }
        if($current->count()>0){
            foreach($hour as $key=>$value){
                foreach($current as $k=>$v){
                    if($value==$v->hour){
                        $current_data[$value] = $v->sum;
                        break;
                    }else{
                        $current_data[$value] = 0;
                    }
                }
            }
        }
        $data['previous_data'] = join($previous_data,',');
        $data['current_data'] = join($current_data,',');
        return view('chart/meanWhileOnlineView')
            ->with('data',$data);
    }

接值

 /**
     * 用户同时在线人数
     * @param Request $request
     */
    public function getMeanWhileOnlineData(Request $request)
    {
        $hour = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24];
        $data['start_time'] = $request->input('start_time');
        $data['end_time'] = $request->input('end_time');
        $current_data = [];
        $previous_data = [];
        $previous = OnlineUser::select(DB::raw("date_format(create_time,'%H') as hour"), DB::raw("count(id) as sum"))
            ->where('create_time', '>=', date('Y-m-d 00:00:00', strtotime($data['start_time'])))
            ->where('create_time', '<=', date('Y-m-d 23:59:59', strtotime($data['start_time'])))
            ->groupBy('hour')
            ->get();
        $current = OnlineUser::select(DB::raw("date_format(create_time,'%H') as hour"), DB::raw("count(id) as sum"))
            ->where('create_time', '>=', date('Y-m-d 00:00:00', strtotime($data['end_time'])))
            ->where('create_time', '<=', date('Y-m-d 23:59:59', strtotime($data['end_time'])))
            ->groupBy('hour')
            ->get();
        if ($previous->count() > 0) {
            foreach ($hour as $key => $value) {
                foreach ($previous as $k => $v) {
                    if ($value == $v->hour) {
                        $previous_data[$value] = $v->sum;
                        break;
                    } else {
                        $previous_data[$value] = 0;
                    }
                }
            }
        }
        if ($current->count() > 0) {
            foreach ($hour as $key => $value) {
                foreach ($current as $k => $v) {
                    if ($value == $v->hour) {
                        $current_data[$value] = $v->sum;
                        break;
                    } else {
                        $current_data[$value] = 0;
                    }
                }
            }
        }
        $data['previous_data'] = join($previous_data,',');
        $data['current_data'] = join($current_data,',');
        return view('chart/meanWhileOnlineView')
            ->with('data',$data);
    }

woshihaiyong168

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Highcharts （后台数据线形统计）使用实例

效果实现：插件地址：插件demo插件教程：插件教程实现步骤：1、选择好符合业务需求的demo 将js文件打包到项目中去直接引用2、显示页面@include('layouts.head') <meta name="viewport" content="width=device-width, user-scalabl
复制链接

扫一扫

专栏目录