標籤：c style class blog code java
前段時間需要使用免費的圖表工具做報表，同事提及了一款圖表工具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>
由於我們需要餅圖，但是這個外掛程式沒有提供餅圖，自己照著協助文檔很粗略的寫了一個餅圖的擴充，有機會再上傳吧。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
