这里要介绍的是一个jQuery插件：jquery.easysector.js
Html5提供了强大的绘图API，让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用HTML5绘制饼图（统计图）的方法。先看一下饼图效果：
http://hovertree.com/texiao/easysector/
这个图是动态生成的，根据传入的比例参数（数组），来动态绘制饼图。饼图的大小也是根据<canvas>高度来动态调整的。
使用easysector插件的办法：
引用jquery库与jquery.easysector.js，在页面中防止一个div（例如：<div id="easysector"></div>）
然后使用js数组构造各项数据，然后执行easysector()方法，参数就是构造的数组与名称大小等项。
全部代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>EasySector - HoverTree</title><base target="_blank" /> <meta charset="utf-8" /> <style> a{color:blue}body{font-family:Helvetica,sans-serif,Arial} </style> <script src="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js"></script> <script src="http://hovertree.com/texiao/easysector/jquery.easysector.1.0.0.js"></script> </head> <body> <div style="width:900px;margin:20px auto"><div style="width:100%;text-align:center;font-size:32px">EasySector <br />jQuery Plugin</div> <div style="float:left;width:350px;height:500px"><a href="http://hovertree.com">HoverTree</a> <br /><a href="http://hovertree.com/texiao/easysector/">EasySector Home</a> <br /><a href="http://hovertree.com/h/bjaf/easysector.htm">Help</a> <br /><a href="http://hovertree.com/texiao/easysector/1.htm">Demo 1</a> <br /><a href="https://www.npmjs.com/package/easysector">NPM</a> <br /><a href="https://github.com/shangyuxian/easysector">Github</a><br /> <script type="text/javascript" src="/themes/sy/gggg336x280a.js"></script> </div><div style="float:right;width:500px"><div id="easysector"></div></div> <div style="width:100%;clear:both;"></div> 何问起 © hovertree.com </div> <script> var h_items = new Array(); h_items[0] = { "h_title": "Chrome", "h_amount": 53, "h_color": "red" } h_items[1] = { "h_title": "FireFox", "h_amount": 16, "h_color": "yellow" } h_items[2] = { "h_title": "IE", "h_amount": 16, "h_color": "green" } h_items[3] = { "h_title": "Other", "h_amount": 15, "h_color": "blue" } $("#easysector").easysector({ "h_items": h_items, "h_title": "Browser Percent", "h_width": 260, "h_borderColor":"silver", "h_poindlength": 0, //"h_showamount": true, "h_backColor":"#eee", "h_recwidth": 20, "h_titlesize": 24, "h_Radii": 125, "h_infosize":16 }); </script> </body> </html>
简洁代码请看：http://hovertree.com/h/bjaf/easysector.htm
更多特效： http://www.cnblogs.com/jihua/p/webfront.html
原文：http://www.cnblogs.com/jihua/p/easysector.html