你的位置:首页 > 网页设计

[网页设计]Html5绘制饼图统计图


这里要介绍的是一个jQuery插件:jquery.easysector.js

Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用HTML5绘制饼图(统计图)的方法。先看一下饼图效果:

http://hovertree.com/texiao/easysector/

jquery.easysector.js

这个图是动态生成的,根据传入的比例参数(数组),来动态绘制饼图。饼图的大小也是根据<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="http://www.cnblogs.com//themes/sy/gggg336x280a.js"></script>    </div><div style="float:right;width:500px"><div id="easysector"></div></div>     <div style="width:100%;clear:both;"></div> 何问起  &copy; 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