需要添加的引用脚本

<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. 数据结构 《2》----基于邻接表表示的图的实现 DFS（递归和非递归）， BFS

    图通常有两种表示方法: 邻接矩阵 和 邻接表 对于稀疏的图,邻接表表示能够极大地节省空间. 以下是图的数据结构的主要部分: struct Vertex{ ElementType element; // ...

  2. CRM客户关系管理系统 ——客户联系人添加（十五）

    需求描述: 1.业务员自己可以查看属于自己的客户信息 2.客服部经理可以查看查看所有客户信息 3.其他人员不得查看客户信息 效果截图:  

  3. swift系统学习控件篇:UITableView+UICollectionView

    工作之余,学习下swift大法.把自己的学习过程分享一下.当中的布局很乱,就表在意这些细节了.直接上代码: UITableView: // // ViewController.swift // UIt ...

  4. Oracle数据库中char, varchar, nvarchar的差异

    1. char      固定长度,最长n个字符.   2. varchar      最大长度为n的可变字符串. (n为某一整数,不同数据库,最大长度n不同)   char和varchar区别:   ...

  5. HDU 5009

    http://acm.hdu.edu.cn/showproblem.php?pid=5009 题意:一个数列,每个点代表一种颜色,每次选一个区间覆盖,覆盖的代价是区间内颜色种类数的平方,直到覆盖整个数 ...

  6. 五、CCNode

    本将主要介绍下CCNode这个类,CCNode是所有节点的基类,其中包括我们常用的CCScene(场景).CCLayer(图层).CCSprite(精灵)等,它是一个不能够可视化显示的抽象类,只是用来 ...

  7. 机器学习技法-决策树和CART分类回归树构建算法

    课程地址:https://class.coursera.org/ntumltwo-002/lecture 重要!重要!重要~ 一.决策树(Decision Tree).口袋(Bagging),自适应增 ...

  8. java生成随机大数据文件

    package iie.udps.test; import java.io.BufferedWriter; import java.io.File; import java.io.FileOutput ...

  9. unable to open sync connection

    有些时候,在你向连接好的Android机器中按照程序时会遭遇失败,logcat提示“unable to open sync connection”. 一般情况下,重启手机几乎肯定可以解决这个问题. 如 ...

  10. UpdatePanel与$.function()同时使用问题

    在.NET中使用了UpdatePanel,里面的输入框使用了jQuery的日历选择器,接下来介绍下两者同时使用的一些细节及问题的解决方法,感兴趣的各位可以参考下哈 今天,在.NET中使用了Update ...