需要添加的引用脚本

<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 简单学习的更多相关文章

  1. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  2. Morris.js和flot绘制折线图的比较

    [文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的 ...

  3. jquery图表插件morris.js参数详解和highcharts图表插件

    一.morris.js 优点:轻巧.简单好用 缺点:没highcharts功能多,常用的足以 网址:http://morrisjs.github.io/morris.js/ 核心代码 1.head调用 ...

  4. 网站资料收集 主要查看js的学习部分

    1.Asp.Net MVC3.0基本的简单的可能都会用,更深入的使用还需加深研究,之后希望对MVC4.0和5.0进行对比学习,暂时看到@葡萄城控件技术团队博客的MVC5系列正在继续http://www ...

  5. js 正则学习小记之匹配字符串

    原文:js 正则学习小记之匹配字符串 今天看了第5章几个例子,有点收获,记录下来当作回顾也当作分享. 关于匹配字符串问题,有很多种类型,今天讨论 js 代码里的字符串匹配.(因为我想学完之后写个语法高 ...

  6. js 正则学习小记之NFA引擎

    原文:js 正则学习小记之NFA引擎 之前一直认为自己正则还不错,在看 次碳酸钴,Barret Lee 等大神都把正则玩的出神入化后发现我只是个战五渣.  求抱大腿,求大神调教. 之前大致有个印象,正 ...

  7. Ext JS 6学习文档–第1章–ExtJS入门指南

    Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS ...

  8. JS简单示例

    首先感谢海棠学院提供的优质视频资源 学习总是一个由简单到难的过程,由浅入深,一步一个脚印,将学过的点玩的深入一点,才能有所进步,单学习总是枯燥而乏味的,切忌焦躁; 示例代码另存放在github:htt ...

  9. 从 prototype.js 深入学习 javascript 的面向对象特性

    从 prototype.js 深入学习 javascript 的面向对象特性 js是一门很强大的语言,灵活,方便. 目前我接触到的语言当中,从语法角度上讲,只有 Ruby 比它更爽. 不过我接触的动态 ...

随机推荐

  1. 调度 Quartz 时间格式配置

    1.   CronTrigger时间格式配置说明 CronTrigger配置格式: 格式: [秒] [分] [小时] [日] [月] [周] [年]

  2. Egret

    http://www.manew.com/forum-html5Engine-1.html http://www.manew.com/forum-html5Engine-1.html https:// ...

  3. Ferry Loading II_贪心

    Description Before bridges were common, ferries were used to transport cars across rivers. River fer ...

  4. android:windowSoftInputMode及其他部分属性用法

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 今天我们来讲讲android:windoSoftInputMode的用法,许多同学会为软键盘的弹出. ...

  5. POJ3107 （树的重心）

    ; INF=; type arr=record u,v,nt:longint; end; arr1=..maxn] of longint; ..maxn*] of arr; lt:..maxn] of ...

  6. U3D各路径实例

  7. fsutil

    编号:1035时间:2016年8月29日15:41:57功能:fsutil栗子:fsutil file createnew e:\b.txt 1073741824 //创建1G文件http://www ...

  8. 简明python教程 --C++程序员的视角（九）：函数式编程、特殊类方法、测试及其他

    函数式编程 Lambda exec,eval和assert语句,repr函数   lambda语句 用来创建简短的单行匿名函数 print_assign = lambda name, value: n ...

  9. 主机控制器接口（HCI）

    主机控制器接口(HCI)提供了一种访问蓝牙硬件能力的通用接口. HCI固件通过访问基带命令.链路管理器命令.硬件状态寄存器.控制寄存器以及事件寄存器实现对蓝牙硬件的HCI命令. HCI是通过包的方式来 ...

  10. MyEclipse+Struts+Hibernate+Mysql开发环境配置

    软件: jdk-6u22-windows-x64.exe apache-tomcat-6.0.29.exe mysql-5.1.51-winx64.exe myeclipse-8.6.0-win32. ...