需要添加的引用脚本

<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. Ubuntu系统下运行Eclipse出现找不到jre的问题的解决方法

    在Ubuntu的某些版本下,比如10.10,会出现以下奇怪问题: 1. 安装jdk 我下载的jdk是bin格式的,直接运行解压,得到一个文件夹. 这个文件夹作为jdk的安装目录,可以拷贝到任意目录. ...

  2. Interview----用最快的方法计算 Fibonacci 数

    输入 n, 用最快的方法求该 Fibocacci 数列的第 n 项. 方法1: 递归,非常慢 方法2: 迭代,因此计算 f[1] , f[2], f[3] ,,,, 复杂度 O(N) 方法3: 采用以 ...

  3. 编程之美的2.17，数组循环移位 & 字符串逆转（反转） Hello world Welcome => Welcome world Hello

    代码如下:(类似于编程之美的2.17,数组循环移位) static void Main(string[] args) { string input = "Hello World Welcom ...

  4. com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure 数据库报错

    -- 查询mysql 数据库链接空闲时间持有最大空闲时间,单位为秒 SHOW VARIABLES WHERE VAriable_name = 'interactive_timeout'; -- 会出现 ...

  5. 初识mySQL（关系型数据库）

    一.数据库修改密码 ①先执行use mysql; ②再执行update  mysql.user  set  password=PASSWORD(要修改的密码) where  user='root' ; ...

  6. Linux发展史

    简述 Linux是一套自由加开放源代码的类Unix操作系统,诞生于1991年10月5日(第一次正式向外公布),由芬兰学生Linus Torvalds和后来陆续加入的众多爱好者共同开发完成. Linux ...

  7. Java-->List&Set

    一.List集合 特点:有序可重复 List集合的猜想: 1.每个元素是不是应该有序号 index 2.addFirst.addLast.set(intdex, 对象) 3.get(index)... ...

  8. Linux 线程--那一年, 我们一起忽视的pthread_join

    前言: 通过linux的pthread库, 相信大家对创建/销毁线程肯定很熟悉, 不过对pthread_join是否知道的更多呢?实验: 先编写一个常规的程序 #include <pthread ...

  9. 优测优社区干货精选|老司机乱谈编辑器之神——vim

    文 / 腾讯 吴双 前言 优测小优 有话说: 腾讯优测只有应用测试大神?不不不,我们还有各种研发大牛! *** vim 是一种信仰,我自从2004年有了这个信仰,已经12个年头了.本文介绍了学习vim ...

  10. Baxter机器人---测试准备（一）

    原创博文,转载请标明出处:--周学伟http://www.cnblogs.com/zxouxuewei/ baxter:http://sdk.rethinkrobotics.com/wiki/Work ...