Html5绘制饼图统计图

最新推荐文章于 2023-11-14 11:14:37 发布

xiaozhen0610

最新推荐文章于 2023-11-14 11:14:37 发布

阅读量1.5k

点赞数 1

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hj22j1jajbjb.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

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