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

    核心util /** * Alipay.com Inc. * Copyright (c) 2004-2015 All Rights Reserved/ */ package com.lucene.de ...

  2. 《BI项目笔记》——微软BI项目笔记连载

    本系列文章主要是结合实际项目,加上自己的总结,整理出来的一系列项目笔记,涉及微软SQL Server2008中商务智能开发中的SSAS.SSIS模块:  准备工作: <BI项目笔记>基于雪 ...

  3. apache服务器安装以及使用passenger插件部署rails应用

    小例子可以部署在rails自带的WEBrick上,逐渐往后走还得上Apache. 安装apache服务器 命令是sudo apt-get install apache2 安装passenger插件 安 ...

  4. what is difference in (int)a,(int&)a,&a,int(&a) ?

    This interview question come from a famous communication firm of china. : ) #include <iostream> ...

  5. 转：C/C++程序员简历模板

    https://github.com/geekcompany/ResumeSample/blob/master/c.md 本简历模板由国内首家互联网人才拍卖网站「 JobDeer.com 」提供. ( ...

  6. jvm之直接内存的影响

    直接内存 直接内存是一个重要的问题,首先它不是运行数据区的部分也不是java虚拟机规范的一部分,这个的出现主要和java1.4后出现的NIO相关,一个基于通道和缓冲区的io方式,它可以使用Native ...

  7. php: 不能嵌套try-catch-fnally,否则执行时间过长

    php不能try-catch-fnally里面在嵌套try-catch-fnall,否则本来执行时间不长的程序,会被执行更长时间,这是php的bug吗? 如: try{ 代码块 }catch (\Ex ...

  8. 虚拟机EAL: Error reading from file descriptor

    这个是虚拟机安装固有的BUG,代码差异如下: diff --git a/lib/librte_eal/linuxapp/igb_uio/igb_uio.c b/lib/librte_eal/linux ...

  9. centos各版本信息

    CentOS version Architectures RHEL base Kernel CentOS release date RHEL release date Delay (days) 2.1 ...

  10. 【网络】IP地址格式转换（htonl、ntohl；inet_addr、inet_ntoa）

    1.htonl ()和ntohl( ) u_long PASCAL FAR ntohl (u_long netlong); u_short PASCAL FAR ntohs (u_short nets ...