需要添加的引用脚本

<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. windows 命令修改IP

    修改ip: netsh -c interface ip set address name="本地连接" source=static addr=192.168.11.100 mask ...

  2. 电话 SMS 邮件 网页 AppStore

    //调用safar打开网页 [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http://www.cnbl ...

  3. 16、SQL基础整理（触发器.方便备份）

    触发器(方便备份) 本质上还是一个存储过程,只不过不是通过exec来调用执行,而是通过增删改数据库的操作来执行(可以操作视图) 全部禁用触发器 alter table teacher disable ...

  4. POJ3237 (树链剖分+线段树）

    Problem Tree (POJ3237) 题目大意 给定一颗树,有边权. 要求支持三种操作: 操作一:更改某条边的权值. 操作二:将某条路径上的边权取反. 操作三:询问某条路径上的最大权值. 解题 ...

  5. nginx+fast-cgi+c

    1. 下载fastcgi开发包,编译安装 http://www.fastcgi.com/dist/fcgi-current.tar.gz #wget http://www.fastcgi.com/di ...

  6. c++学习笔记4：如何写好注释

    1.单行注释一般放在语句的上方: // cout and endl live in the iostream library std::cout << "Hello world! ...

  7. js控制tr 隐藏 显示

    tr td 外面不要套div <tr> <td>排期确定结果: </td> <td> <label class="liradio&quo ...

  8. js中this和回调方法循环-我们到底能走多远系列（35）

    我们到底能走多远系列(35) 扯淡: 13年最后一个月了,你们在13年初的计划实现了吗?还来得及吗? 请加油~ 主题: 最近一直在写js,遇到了几个问题,可能初入门的时候都会遇到吧,总结下. 例子: ...

  9. 关于环境变量PATH的几点注意事项

    查看执行文件路径变量PATH的内容可用echo $PATH.echo表示显示打印之意,$表示后接的是变量. 如下图所示,其中每个目录中间用冒号(:)来隔开,每个目录是有顺序之分的: 如果预修改PATH ...

  10. Yii2中自带分页类实现分页

    1.首先写控制器层 先引用pagination类 use yii\data\Pagination; 写自己的方法: function actionFenye(){        $data = Fie ...