这里要介绍的是一个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>