Laravel快速创建统计图表

1、需要的css:

<link rel="stylesheet" href="https://cdn.bootcss.com/morris.js/0.5.1/morris.css">

2、blade主代码：


<h2>按照时间查看</h2>
<hr>
<ul class="nav nav-pills"><li class="{{ request('days') == 7 || request('days') == '' ? 'active' : ''}}"><a href="{{ url('admin/numberCount?days=7') }}">7 天</a></li><li class="{{ request('days') == 30 ? 'active' : ''}}"><a href="{{ url('admin/numberCount?days=30') }}">30 天</a></li><li class="{{ request('days') == 60 ? 'active' : ''}}"><a href="{{ url('admin/numberCount?days=60') }}">60 天</a></li><li class="{{ request('days') == 90 ? 'active' : ''}}"><a href="{{ url('admin/numberCount?days=90') }}">90 天</a></li>
</ul>
<div id="stats-container" style="height: 250px;"></div>#渐变色例子
<h1>Bar charts</h1>
<div id="graph"></div>

3、需要的js代码：

<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdn.bootcss.com/morris.js/0.5.1/morris.min.js"></script><script>var data = JSON.parse('{!! $stats !!}');#务必注意这里// console.log(data);// new Morris.Bar({#如果需要柱状图解开她Morris.Line({element: 'stats-container',data: data,xkey: 'date',#横坐标ykeys: ['customer', 'teacher'],labels: ['家长', '老师']});#渐变色例子Morris.Bar({element: 'graph',data: [{x: '2011 Q1', y: 0},{x: '2011 Q2', y: 1},{x: '2011 Q3', y: 2},{x: '2011 Q4', y: 3},{x: '2012 Q1', y: 4},{x: '2012 Q2', y: 5},{x: '2012 Q3', y: 6},{x: '2012 Q4', y: 7},{x: '2013 Q1', y: 8}],xkey: 'x',ykeys: ['y'],labels: ['Y'],barColors: function (row, series, type) {if (type === 'bar') {var red = Math.ceil(255 * row.y / this.ymax);return 'rgb(' + red + ',0,0)';}else {return '#000';}}});
</script>

HomeController查询代码：

...
use Carbon\Carbon;
...public function numberCount(){$days = request('days', 7);$range = Carbon::today()->subDays($days);// \DB::enableQueryLog();$stats = Customer::where('created_at', '>=', $range)->groupBy('date')->orderBy('date', 'DESC')->get([\DB::raw('Date(created_at) as date'),\DB::raw('sum(CASE WHEN customer_type = 1 THEN 1 ELSE 0 END) AS customer'),\DB::raw('sum(CASE WHEN customer_type = 2 THEN 1 ELSE 0 END) AS teacher'),])->toJSON();return view('admin.numberCount', compact('stats', 'data'));
}

曲线图：

柱状图：

参考：
https://gist.github.com/msurguy/9984618

http://morrisjs.github.io/morris.js/bars.html

国内免费的cdn:
http://www.bootcdn.cn/?

可以设置的颜色：

lineColors: ['#0b62a4', '#7A92A3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'],

十六进制颜色值：#0b62a4

十六进制颜色值：#7A92A3

十六进制颜色值：#4da74d

十六进制颜色值：#afd8f8

十六进制颜色值：#edc240

十六进制颜色值：#cb4b4b

十六进制颜色值：#9440ed

MySQL DATE_FORMAT用法：

DATE_FORMAT(date,format)

根据format字符串格式化date值。下列修饰符可以被用在format字符串中：

%M 月名字(January……December)
%W 星期名字(Sunday……Saturday)
%D 有英语前缀的月份的日期(1st, 2nd, 3rd, 等等。）
%Y 年, 数字, 4 位
%y 年, 数字, 2 位
%a 缩写的星期名字(Sun……Sat)
%d 月份中的天数, 数字(00……31)
%e 月份中的天数, 数字(0……31)
%m 月, 数字(01……12)
%c 月, 数字(1……12)
%b 缩写的月份名字(Jan……Dec)
%j 一年中的天数(001……366)
%H 小时(00……23)
%k 小时(0……23)
%h 小时(01……12)
%I 小时(01……12)
%l 小时(1……12)
%i 分钟, 数字(00……59)
%r 时间,12 小时(hh:mm:ss [AP]M)
%T 时间,24 小时(hh:mm:ss)
%S 秒(00……59)
%s 秒(00……59)
%p AM或PM
%w 一个星期中的天数(0=Sunday ……6=Saturday ）
%U 星期(0……52), 这里星期天是星期的第一天
%u 星期(0……52), 这里星期一是星期的第一天
%% 一个文字“%”。

举例：

select DATE_FORMAT(create_time,'%Y%u') weeks,count(caseid) count from tc_case group by weeks;
select DATE_FORMAT(create_time,'%Y%m%d') days,count(caseid) count from tc_case group by days;
select DATE_FORMAT(create_time,'%Y%m') months,count(caseid) count from tc_case group by months;

参考：
https://blog.csdn.net/mengtao0609/article/details/54138623

Laravel快速创建统计图表相关推荐

Serverless实战 —— Laravel + Serverless Framework 快速创建 CMS 内容管理系统
Serverless实战 -- Laravel + Serverless Framework 快速创建 CMS 内容管理系统作者: Tabor 今天,为大家带来一篇 Laravel + Server ...
零基础学python图文版-如何快速创建投票页面 | 腾讯问卷怎么用_什么值得买
Kim工房:如何快速创建投票页面?这颗"腾讯问卷"请吃下! 2018-01-11 19:50:10 28点赞 275收藏 7评论序:微信群没有投票功能,QQ群投票又太简陋,想搞个 ...
Laragon实现快速创建ThinkPHP项目
效果图实现步骤 1. 修改Laragon的默认后缀为.com (原来是.test,可选) 2. 关闭apache,启用nginx @80端口 3. 对着任务栏的laragon图标右键,快速创建,配 ...
魔众企业VI系统-帮您快速创建现代化的企业形象
24424_zw7t_5319.jpg 魔众企业VI系统采用PHP+Mysql架构,是一款对SEO非常友好.功能全面.安全稳定.支持多终端展示,帮您快速创建现代化的企业形象. 魔众企业VI系统发布v1 ...
快速创建流程图、思维导图、组织结构图、拓扑图
点击下方链接,即可快速创建流程图.思维导图.组织结构图.拓扑图: 流程图可用于绘制各种流程图,操作简单,功能强大:软件内置海量精美流程图模板,帮助你轻松绘制项目管理. 思维导图头脑风暴.思维整理. ...
node aws 内存溢出_如何使用Node.js和AWS快速创建无服务器RESTful API
node aws 内存溢出 by Mark Hopson 马克·霍普森(Mark Hopson) 如何使用Node.js和AWS快速创建无服务器RESTful API (How to quickly ...
vscode 新建php模板,使用VSCode快速创建vue文件模版的方法介绍
VSCode怎么自定义代码模版?下面本篇文章给大家介绍一下VSCode快速创建vue文件模版的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 修改位置打开vscode首选项- ...
webpack2--webpack 4.X 快速创建demo
准备工作 1.新建文件夹:webpack-demo(下面我们简称该文件夹为根目录),在根目录下面建两个文件夹,分别为src和dist. 1).src文件夹:用来存放我们编写的javascript代码, ...
linux命令dd创建虚拟硬盘,每日一题.PYTHON如何模拟LINUX的dd命令快速创建大文件?...
原文数据: 无具体要求: 1. 模拟Linux的dd命令快速创建大文件代码实现: # -*- coding: utf-8 -*- """ # # Authors: l ...
微信公众号可快速创建“门店小程序” 不用开发
"门店小程序"是啥?"门店小程序"是小程序的一项新能力.无需开发,商户就可在微信公众号后台快速创建"门店小程序".这个小程序类似一张&quo ...