前段时间需要使用免费的图表工具做报表，同事提及了一款图表工具morris。官方网站：

http://www.oesmith.co.uk/morris.js/

该插件遵循BSD协议，可以用于商业软件，也可以进行修改，相对比较宽松。目前插件版本0.4.3，感觉好像没有完全开发完成，因为可以画的图相对有限。

该插件依赖于jquery和Raphaël，jquery不用说大家都知道，其实Raphaël才是真正的核心所在。关于Raphaël可以参考下面的博客，遗憾的是前几天好像中文帮助页面还可以打开，今天打开失败了，还是看英文文档吧

http://www.cnblogs.com/lhb25/archive/2013/01/06/raphael-js-reference.html

使用morris最大有点是简单明了，很符合我们写js的习惯，不像有些图表工具要写xml等，而且不是使用flash，这一点我很喜欢。

下面举个例子，看看怎么使用吧：和官网有些不同点

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>morris测试</title>

    <link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css"/>

</head>

<body>

<div style="height:300px;" id="myfirstchart"></div>

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>

<script>

    $(function() {

        new Morris.Line({

            element: $('#myfirstchart'),

            data: [

                { year: '第一周', value: 20 },

                { year: '第二周', value: 10 },

                { year: '第三周', value: 5 },

                { year: '第四周', value: 5 },

                { year: '第五周', value: 20 }

            ],

            xkey: 'year',

            ykeys: ['value'],

            labels: ['得分'],

            parseTime: false

        });

    })

</script>

</body>

</html>

由于我们需要饼图，但是这个插件没有提供饼图，自己照着帮助文档很粗略的写了一个饼图的扩展，有机会再上传吧。

一款免费的js图表工具--morris的更多相关文章

  1. BlackHat会议上将公布一款免费的汽车黑客工具

    汽车,无可厚非是现代社会很重要的交通工具,但与此同时却也带来了诸多安全隐患,不管怎样,汽车安全都是我们不可忽视的一个重大问题. 即将免费分享该工具 近日一名法国研究者将发布一款检测汽车安全漏洞的工具, ...

  2. Windows下几款免费C/C++开发工具简介

    我相信作为编程初学者,我们都希望有好用的编程软件.这里"好用"应该至少要满足两点:1.安装简单,2.使用方便.大神移驾,对工具有特殊偏好跳过,从来不用Windows的止步.本文不做 ...

  3. 给大家介绍款在线压缩JS的工具

    首先说下该工具的域名:http://javascriptcompressor.com/ 进入后界面如下: 具体要讲下它的功能点:在线压缩 Javascript 源码可以分不同的压缩级别:比如,一般情况 ...

  4. 推荐一款免费的PDF转换工具 | PDFCandy

    相信大家在用的PDF转换工具也很多,下面良心推荐这款软件(PDFCandy)给大家,方便在今后的工作中进行运用.提高大家的工作效率. PDFCandy分为两种:网页端和客户端.(根据大家的喜好度来进行 ...

  5. 五款免费的UML建模工具

    1.免费UML建模工具推荐:JUDE–community 2.免费UML建模工具推荐:UMLet 3.免费UML建模工具推荐:ArgoUML 4.免费UML建模工具推荐:BOUml 5.免费UML建模 ...

  6. JS图表工具 ---- Highcharts

    Highcharts 是一个用纯 JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是 web 应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用. Hi ...

  7. 在线压缩JS的工具

    给大家介绍款在线压缩JS的工具 首先说下该工具的域名:http://javascriptcompressor.com/ 进入后界面如下: 具体要讲下它的功能点:在线压缩 Javascript 源码可以 ...

  8. 转：几款免费的图表js插件

    1,ichartjs(国产)(http://www.ichartjs.com/)  ===============强烈推荐ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业 ...

  9. VOOKI：一款免费的Web应用漏洞扫描工具

    Vooki是一款免费且用户界面友好的Web应用漏扫工具,它可以轻松地为你扫描任何Web应用并查找漏洞.Vooki主要包括三个部分,Web应用扫描器,Rest API扫描器以及报告.Web应用扫描器​V ...

随机推荐

  1. mac os 禁止apache httpd自动启动(转)

    mac os 禁止apache httpd自动启动 博客分类: 计算机使用   mac os不像linux有/etc/init.d/rc.local以及service的方式可以设置程序随机启动,而是使 ...

  2. 通知Notification

    步骤: 1.调用getSystemService()获取NotificationManager:NotificationManager manager = (NotificationManager)g ...

  3. HMI与设计模式

    设计模式是做一个好的架构的一个基础.那么设计模式具体的概念是啥呢?百度百科曰:设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是 ...

  4. 数据结构代码整理（线性表，栈，队列，串，二叉树，图的建立和遍历stl，最小生成树prim算法）。。持续更新中。。。

    //归并排序递归方法实现 #include <iostream> #include <cstdio> using namespace std; #define maxn 100 ...

  5. 一个div里有多个a标签，改变a标签的字体颜色方法

    <script type="text/javascript">var all=document.getElementById("big");var ...

  6. 在ionic/cordova中使用极光推送插件（jpush）

    Stpe1:创建一个项目(此处使用的是tab类型的项目,创建方式可参照我前一篇如何离线创建Ionic1项目) Stpe2:修改项目信息 打开[config.xml]修改下图内容:

  7. jquery插件 - 学习笔记 （插件参数及函数的调用）

    今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...

  8. (十四)UDP协议的两个主要方法sendto和recvfrom详解

    在网络编程中,UDP运用非常广泛.很多网络协议是基于UDP来实现的,如SNMP等.大家常常用到的局域网文件传输软件飞鸽传书也是基于UDP实现的. 本篇文章跟大家分享linux下UDP的使用和实现,主要 ...

  9. A*算法 -- 八数码问题和传教士过河问题的代码实现

    前段时间人工智能的课介绍到A*算法,于是便去了解了一下,然后试着用这个算法去解决经典的八数码问题,一开始写用了挺久时间的,后来试着把算法的框架抽离出来,编写成一个通用的算法模板,这样子如果以后需要用到 ...

  10. Exit code from container executor initialization is : 24 ExitCodeException exitCode=24: Configuration file ../etc/hadoop/container-executor.cfg not found.

    /etc/hadoop/conf的软链接(/etc/hdfs/conf)不正确,应该是/etc/yarn/conf