前段時間需要使用免費的圖表工具做報表，同事提及了一款圖表工具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>
由於我們需要餅圖，但是這個插件沒有提供餅圖，自己照着幫助文檔很粗略的寫了一個餅圖的擴展，有機會再上傳吧。