前段时间需要使用免费的图表工具做报表，同事提及了一款图表工具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. LINUX安全加固规范

    1 概述 近几年来Internet变得更加不安全了.网络的通信量日益加大,越来越多的重要交易正在通过网络完成,与此同时数据被损坏.截取和修改的风险也在增加. 只要有值得偷窃的东西就会有想办法窃取它的人 ...

  2. C++知识库

    C++知识库 秒杀多线程 .

  3. Write a script to check an interesting game 6174

    # -*- coding: utf-8 -*-#from ftplib import FTPimport osdef sort_reverse(x,y): if x>y: return -1 i ...

  4. NSJSONSerialization(json序列化)

    //通过调用isValidJSONObject来判断Foundation对象是否可以转换为JSON数据 NSJSONSerialization isValidJSONObject:obj 我们能利用N ...

  5. Qt5 installation and path configuration

    Replace Default Qt version paths in: /usr/lib/x86_64-linux-gnu/qtchooser/default.confor in newer rel ...

  6. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  7. Hbase的配置和安装

    Hbase的配置和安装 1. 解压hbase.配置HBASE_HOME tar -zxvf hbase-1.2.4.tar.gz 2. 修改$HBASE_HOME/conf/hbase-env.sh文 ...

  8. mac上的git环境配置

    git生成ssh key for mac 打开终端 cd ~/.ssh 看有没有文件 没有的时候 有有ssh key是这样的多了id_rsa(私钥)和 id_rsa.pub(公钥) 没有的话创建 ss ...

  9. C# 实现HTML转换成图片的方法

    /// <summary>        /// 通过WebBrowser控件来实现从HTML到Bmp图片的生成.        /// </summary>        / ...

  10. eclipse绘制activiti无法生成图形

    今天使用eclipse绘制acitiviti,发现无法绘制图形,设置里面勾选也勾选了,同时activiti插件也是最新的,最后发现同时打开了两个eclipse窗口就不支持生成图形,看来只能开一个窗口了 ...