前段时间需要使用免费的图表工具做报表，同事提及了一款图表工具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. Xcode 8

    (一)Xcode8去掉多余LOG 1.打开我们的项目,进入EditScheme 2.我们在Environment Variables中添加OS_ACTIVITY_MODE=disable

  2. 关于IONIC 报错 XX is not a function

    刚开始 做一个项目,总是报错"XX is not  a function"   最后发现 原因 ,   原来是 服务的 注入位置 有问题. angular.module(" ...

  3. C# 委托实例（跨窗体操作控件）

    在C#里面却是可以不用自定义消息这么复杂的方法来实现跨窗体调用控件,C#有更好的办法就是委托. 效果描述:有两个窗体,FORM1(一个名为“打开form2”的button控件)和FORM2(一个名为“ ...

  4. Cheatsheet: 2016 10.01 ~ 10.31

    Docker Introduction to Docker Monitoring Database MongoDB: The Good, The Bad, and The Ugly Web 4 Key ...

  5. JavaScript继承

    最佳的继承范式 寄生组合继承 我们来看一下它的实现方式: function Object(o){ var TempObject = function(){}; TempObject.prototype ...

  6. swift开发学习网站

    1.https://github.com/Aufree/trip-to-iOS#ios- 2.http://www.code4app.com/forum.php?mod=viewthread& ...

  7. 自己常用JS和JQ 函数

    //验证码函数 <button id="send">点击发送验证码</button> <script src="jquery.min.js& ...

  8. [git] git代理及常用命令，远程桌面代理

     1.代理 公司只能内网,上外网只能用代理,坑货! 2. 更新代码命令    1)下载代码:git clone ------------    2) 指定目录: cd 文件名    3)git add ...

  9. google play下载apk

    http://apps.evozi.com/apk-downloader/ 输入apk下载地址

  10. 程序设计入门——C语言 第6周编程练习 2 完数（5分）

    2 完数(5分) 题目内容: 一个正整数的因子是所有可以整除它的正整数.而一个数如果恰好等于除它本身外的因子之和,这个数就称为完数.例如6=1+2+3(6的因子是1,2,3). 现在,你要写一个程序, ...