前段时间需要使用免费的图表工具做报表，同事提及了一款图表工具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>
由于我们需要饼图，但是这个插件没有提供饼图，自己照着帮助文档很粗略的写了一个饼图的扩展，有机会再上传吧。