前段时间需要使用免费的图表工具做报表，同事提及了一款图表工具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的更多相关文章
-
BlackHat会议上将公布一款免费的汽车黑客工具
汽车,无可厚非是现代社会很重要的交通工具,但与此同时却也带来了诸多安全隐患,不管怎样,汽车安全都是我们不可忽视的一个重大问题. 即将免费分享该工具 近日一名法国研究者将发布一款检测汽车安全漏洞的工具, ...
-
Windows下几款免费C/C++开发工具简介
我相信作为编程初学者,我们都希望有好用的编程软件.这里"好用"应该至少要满足两点:1.安装简单,2.使用方便.大神移驾,对工具有特殊偏好跳过,从来不用Windows的止步.本文不做 ...
-
给大家介绍款在线压缩JS的工具
首先说下该工具的域名:http://javascriptcompressor.com/ 进入后界面如下: 具体要讲下它的功能点:在线压缩 Javascript 源码可以分不同的压缩级别:比如,一般情况 ...
-
推荐一款免费的PDF转换工具 | PDFCandy
相信大家在用的PDF转换工具也很多,下面良心推荐这款软件(PDFCandy)给大家,方便在今后的工作中进行运用.提高大家的工作效率. PDFCandy分为两种:网页端和客户端.(根据大家的喜好度来进行 ...
-
五款免费的UML建模工具
1.免费UML建模工具推荐:JUDE–community 2.免费UML建模工具推荐:UMLet 3.免费UML建模工具推荐:ArgoUML 4.免费UML建模工具推荐:BOUml 5.免费UML建模 ...
-
JS图表工具 ---- Highcharts
Highcharts 是一个用纯 JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是 web 应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用. Hi ...
-
在线压缩JS的工具
给大家介绍款在线压缩JS的工具 首先说下该工具的域名:http://javascriptcompressor.com/ 进入后界面如下: 具体要讲下它的功能点:在线压缩 Javascript 源码可以 ...
-
转：几款免费的图表js插件
1,ichartjs(国产)(http://www.ichartjs.com/) ===============强烈推荐ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业 ...
-
VOOKI：一款免费的Web应用漏洞扫描工具
Vooki是一款免费且用户界面友好的Web应用漏扫工具,它可以轻松地为你扫描任何Web应用并查找漏洞.Vooki主要包括三个部分,Web应用扫描器,Rest API扫描器以及报告.Web应用扫描器V ...
随机推荐
-
mysql自动添加最后修改时间
字段不为空 NOT NULL 类型 :timestamp 默认值 :CURRENT_TIMESTAMP
-
Android OpenGL 编写简单滤镜
Android 上使用Opengl进行滤镜渲染效率较高,比起单纯的使用CPU给用户带来的体验会好很多.滤镜的对象是图片,图片是以Bitmap的形式表示,Opengl不能直接处理Bitmap,在Andr ...
-
nested exception is com.mysql.jdbc.PacketTooBigException: Packet for query is too large (1044 >; 1024
HTTP Status 500 - type Exception report message description The server encountered an internal error ...
-
如何修改opencms数据库配置
修改/webapps/opencms/WEB-INF/config/opencms.properties文件 什么情况下需要修改配置? 1. 使用过程中,修改数据库配置: 2. 太长时间没接触服务器, ...
-
ie8中使用placeholder
placeholder 是 html5 中的新属性,考虑到还有不少 ie8 的用户,所以找了一个 ie8 的 placeholder 的补丁,如下: <script type="tex ...
-
java 上传文件
public static boolean upload(File file, String savepath, String loginNo, String filename) { boolean ...
-
Python 3.X安装配置
0x01 安装Python 目前,Python有两个版本,一个是2.x版,一个是3.x版,这两个版本是不兼容的. 本教程安装的是python-3.6.1-amd64版本. Python官网:https ...
-
[NOIp 2014]解方程
Description 已知多项式方程: a0+a1x+a2x^2+..+anx^n=0 求这个方程在[1, m ] 内的整数解(n 和m 均为正整数) Input 输入文件名为equation .i ...
-
Linux TCP并发请求溺出 调优
TCP并发请求溺出 调优:系统开启某个监听端口后,当多个TCP请求连接监听端后,会把多个请求交给backlog的默认监听队列由socket server一并处理,backlog有自己的队列长度默认12 ...
-
laravel学习历程
1.www目录下拉下来一个laravel框架 composer create-project laravel/laravel laravelapp --prefer-dist laravelapp 为 ...