morris.js 简单学习
需要添加的引用脚本
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="morris.min.js" type="text/javascript"></script>
<body> <div id="donut-example"></div>
<div id="line-example"></div>
<div id="bar-example"></div>
<script type="text/javascript">
Morris.Donut({
element: 'donut-example',
data: [
{ label: "下载文件数", value: 56 },
{ label: "App信息数", value: 100 },
{ label: "页面信息数", value: 200 },
{ label: "销售信息数", value: 30 },
{ label: "邮箱信息数", value: 23 },
{ label: "人员信息数", value: 12 }
]
}); Morris.Line({
element: 'line-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['上线', '下线']
}); Morris.Bar({
element: 'bar-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
</script>
</body>
morris.js 简单学习的更多相关文章
- js简单 图片版时钟,带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- Morris.js和flot绘制折线图的比较
[文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的 ...
- jquery图表插件morris.js参数详解和highcharts图表插件
一.morris.js 优点:轻巧.简单好用 缺点:没highcharts功能多,常用的足以 网址:http://morrisjs.github.io/morris.js/ 核心代码 1.head调用 ...
- 网站资料收集 主要查看js的学习部分
1.Asp.Net MVC3.0基本的简单的可能都会用,更深入的使用还需加深研究,之后希望对MVC4.0和5.0进行对比学习,暂时看到@葡萄城控件技术团队博客的MVC5系列正在继续http://www ...
- js 正则学习小记之匹配字符串
原文:js 正则学习小记之匹配字符串 今天看了第5章几个例子,有点收获,记录下来当作回顾也当作分享. 关于匹配字符串问题,有很多种类型,今天讨论 js 代码里的字符串匹配.(因为我想学完之后写个语法高 ...
- js 正则学习小记之NFA引擎
原文:js 正则学习小记之NFA引擎 之前一直认为自己正则还不错,在看 次碳酸钴,Barret Lee 等大神都把正则玩的出神入化后发现我只是个战五渣. 求抱大腿,求大神调教. 之前大致有个印象,正 ...
- Ext JS 6学习文档–第1章–ExtJS入门指南
Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...
- JS简单示例
首先感谢海棠学院提供的优质视频资源 学习总是一个由简单到难的过程,由浅入深,一步一个脚印,将学过的点玩的深入一点,才能有所进步,单学习总是枯燥而乏味的,切忌焦躁; 示例代码另存放在github:htt ...
- 从 prototype.js 深入学习 javascript 的面向对象特性
从 prototype.js 深入学习 javascript 的面向对象特性 js是一门很强大的语言,灵活,方便. 目前我接触到的语言当中,从语法角度上讲,只有 Ruby 比它更爽. 不过我接触的动态 ...
随机推荐
- FR #3题解
A. 傻逼题?...前缀和什么的随便搞搞就好了. #include<iostream> #include<cstdio> #include<cstring> #in ...
- inno安装卸载时检测程序是否正在运行卸载完成后自动打开网页-代码无效
inno安装卸载时检测程序是否正在运行卸载完成后自动打开网页-代码无效 inno setup 安装卸载时检测程序是佛正在运行卸载完成后自动打开网页-代码无效 --------------------- ...
- [转]LUA C 互调
组件工厂 ------3D游戏研发 LUA和C之间的函数调用 1.1 从C程序调用LUA函数 LUA的函数和普通变量一样也是First Class Variable类型,可以看作函数指针变量参与栈操作 ...
- nginx+fast-cgi+c
1. 下载fastcgi开发包,编译安装 http://www.fastcgi.com/dist/fcgi-current.tar.gz #wget http://www.fastcgi.com/di ...
- Qt之镜像旋转
简述 Qt中可以对图片进行任何处理,改变亮度.灰度.透明度.大小.形状等,当然也可以进行镜像旋转! 简单的几行代码,有时就可以事半功倍...甚至图片不用经过美工处理就可以直接拿来使用! 简述 实现 原 ...
- Conference Search不错的学术会议日程提示网站
一个不错的学术会议日程提示网站 http://www.confsearch.org,还可以通过内嵌框架(embedded iframe)集成到自己的网页上. http://www.confsearch ...
- Linux下删除乱码或特殊字符文件
今天遇到一个问题,一个文件名是“-MXV9.log”,直接用rm删除的时候就报错,如下: [localhost]rm -MXV9.log rm: illegal option -- M rm: ill ...
- shell 脚本实战笔记(1)--source/fork/exec的区别
在linux shell编程中, 随着脚本处理规模的变大, 会嵌套调用子进程. 但父进程以不同的方式调用子进程, 其结果和背后的机制不尽相同.这边就简单描述下source/fork/exec调用子进程 ...
- 六个超大规模Hadoop(前景)
http://cloud.zol.com.cn/441/4415033_all.html 希望自己可以尽快把Hadoop学好
- .net利用本地播放器播放视频文件代码
前台点击按钮,执行js事件,跳转到后台代码: function funShowVideo(index) { var iTop = (window.screen.availHeig ...