Home > Developer > Web Develop
Some time ago, a free charting tool was needed to make the report, and colleagues mentioned a chart tool Morris. Official website:
http://www.oesmith.co.uk/morris.js/
The plug-in follows the BSD protocol, can be used for commercial software, can also be modified, relatively loose. The plug-in version is now 0.4.3, feeling as if not fully developed, because the graph can be drawn relatively limited.
The plugin relies on jquery and rapha?l,jquery Needless to say everyone knows, in fact Rapha?l is the real core. About Rapha?l can refer to the following blog, unfortunately, a few days ago as if the Chinese help page can open, today opened failed, or read English documents it
Http://www.cnblogs.com/lhb25/archive/2013/01/06/raphael-js-reference.html
Using Morris the biggest bit is simple and clear, very consistent with our habit of writing JS, not like some charting tools to write XML, and not using Flash, which I like.
Here's an example to see how to use it: it's a little different from the official website.
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title>Morris Test</title> <Linkrel= "stylesheet"href= "Http://cdn.oesmith.co.uk/morris-0.4.3.min.css"/></Head><Body><Divstyle= "height:300px;"ID= "Myfirstchart"></Div><Scriptsrc= "Http://code.jquery.com/jquery-1.9.0.js"></Script><Scriptsrc= "Http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></Script><Scriptsrc= "Http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></Script><Script> $(function() { NewMorris.line ({element: $ ('#myfirstchart'), data: [{year:'first week', Value: -}, {year:'second week', Value:Ten}, {year:'Third week', Value:5}, {year:'Fourth Week', Value:5}, {year:'Fifth Week', Value: -}], Xkey:' Year', Ykeys: ['value'], Labels: ['score'], Parsetime:false }); })</Script></Body></HTML>
Since we need pie chart, but this plug-in does not provide pie chart, it is very rough to follow the help document to write a pie chart extension, there is a chance to upload it again.
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
