需要添加的引用脚本

<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. Google protobuf

    个人理解: 定义.proto文件就是指明消息里包含的成员和类型,protoc会compile成相应的java文件包含interface和implementation class,然后在构建messag ...

  2. codeforces 580C Kefa and Park（DFS）

    题目链接:http://codeforces.com/contest/580/problem/C #include<cstdio> #include<vector> #incl ...

  3. PHP date和time

    一.time()函数 time():得到一个数字,这个数字表示从1970-01-01到现在共走了多少秒. 前一天的时间就是 time()-60*60*24. 前一年的时间就是 time()-60*60 ...

  4. 如何重置mysql的密码

    如何重置mysql的密码 如果知道密码,则通过以下方式修改: gaurav@gaurav:~$ mysql --user=root --pass mysql Enter password: mysql ...

  5. Qt的QLineEdit显示密码

    ui->lineEdit->setEchoMode( QLineEdit::Password );

  6. button 浏览器兼容问题

    ie8和360出现的问题 应该加上type属性

  7. OpenvSwitch架构

    Openvswitch的架构 数据库结构和OVS-VSCTL # ps aux | grep openvswitch root      1117  0.0  0.0  21200  1580 ?   ...

  8. Linux Command Line 备忘

    1. 如果要删除目录, rmdir or rm -d 或许可以删除空目录,但是只有 rm -R 可以把目录以及其内容连带删除! 2. 查看文件大小: ls -l --block-size=G 还可以换 ...

  9. vmware-workstation-11中centos-6.6安装

    排版比较乱,参见 https://www.zybuluo.com/Jpz/note/144303 VMware Workstation 11中CentOS 6.6安装 Linux开发环境配置 目录 V ...

  10. 83. Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...