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

简洁代码请看：http://hovertree.com/h/bjaf/easysector.htm

更多特效： http://www.cnblogs.com/jihua/p/webfront.html

Html5绘制饼图统计图的更多相关文章

  1. HTML5绘制饼图示例（一）

    原文地址:http://www.2cto.com/kf/201108/100251.html HTML5引入Canvas元素,用于图形的绘制,我们可以仅仅基于HTML和JavaScript就能绘制出原 ...

  2. HTML5 Canvas（实战：绘制饼图2 Tooltip）

    继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...

  3. html5--5-16 综合实例绘制饼图

    html5--5-16 综合实例绘制饼图 实例 <!doctype html> <html> <head> <meta charset="utf-8 ...

  4. PHP中用GD绘制饼图

    PHP中用GD绘制饼图,绘制的类见代码: Class Chart{ private $image; // 定义图像 private $title; // 定义标题 private $ydata; // ...

  5. 【Highcharts】 绘制饼图和漏斗图

    1.outModel类设计 设计outModel类首先研究下Highcharts中series的data数据格式,发现饼图和漏斗图都可以使用这样格式的数据 series: [{ name: 'Uniq ...

  6. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

  7. 使用ArcGIS API for Silverlight + Visifire绘制地图统计图

    原文:使用ArcGIS API for Silverlight + Visifire绘制地图统计图 最近把很久之前做的统计图又拿出来重新做了一遍,感觉很多时候不复习,不记录就真的忘了,时间是最好的稀释 ...

  8. html5实现饼图和线图

    html5实现饼图和线图-我们到底能走多远系列(34) 我们到底能走多远系列(34) 扯淡: 送给各位一段话:     人生是一个不断做加法的过程     从赤条条无牵无挂的来     到学会荣辱羞耻 ...

  9. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

随机推荐

  1. LINQ系列：LINQ to SQL Select查询

    1. 查询全部字段 using (NorthwindContext context = new NorthwindContext()) { var expr = context.Products; f ...

  2. jquery $.each的用法

    通过它,你可以遍历对象.数组的属性值并进行处理. 使用说明 each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) $.each(Object, function(p1, p2) ...

  3. supportRequestWindowFeature与requestWindowFeature

    在Activity中去掉标题栏只需要在onCreate()中在setContentView前使用requestWindowFeature(). 在AppCompatActivity中去掉标题栏只需要在 ...

  4. 前端学PHP之面向对象系列第二篇——魔术方法

    × 目录 [1]构造方法 [2]析构方法 [3]不可访问属性[4]对象复制[5]字符串[6]对象不存在[7]自动加载类[8]串行化[9]函数调用 前面的话 php在面向对象部分有很多相关的魔术方法,这 ...

  5. 【原创】开源Math.NET基础数学类库使用(09)相关数论函数使用

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  6. 创建第二个 vlan network "vlan101" - 每天5分钟玩转 OpenStack（96）

    前面我们创建了 vlan100,并部署了 instance,今天将继续创建第二个 vlan network "vlan101". subnet IP 地址为 172.16.101. ...

  7. ASP.NET MVC之JsonResult（六）

    前言 这一节我们利用上节所讲Unobtrusive Ajax并利用MVC中的JsonResult来返回Json数据. JsonResult 上节我们利用分部视图返回数据并进行填充,当我们发出请求需要获 ...

  8. DDD 领域驱动设计－Value Object（值对象）如何使用 EF 进行正确映射

    写在前面 首先,这篇博文是用博客园新发布的 MarkDown编辑器 编写的,这也是我第一次使用,语法也不是很熟悉,但我觉得应该会很爽,博文后面再记录下用过的感受,这边就不多说. 阅读目录: 上一篇回顾 ...

  9. swift 新特性

    switch支持任意类型的数据以及各种比较操作——不仅仅是整数以及测试相等. 运行switch中匹配到的子句之后,程序会退出switch语句,并不会继续向下运行,所以不需要在每个子句结尾写break. ...

  10. 关于BFC不会被浮动元素遮盖的一些解释

    简介 在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为.规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box. ...