这里要介绍的是一个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. 不care小米，梁军坦言微鲸才是乐视最大对手

    除了每天毫无悬念地上头条和陷入困境的生态帝国之外,乐视还要继续操心着它的对手们."挑事儿"的小米已经不足为惧,后起之秀微鲸成了一个令它"头疼"的所在.因为,不仅 ...

  2. WebDriver--操控浏览器

    前一篇讲述了元素的定位方法,现在开始练习如何写自动化测试脚本 我使用的编辑工具是PyCharm,今后该博客中所写的有关Python脚本,都是在该工具中编写的. WebDriver提供了控制浏览器大小. ...

  3. SQL中Group By的使用

    1.概述 2.原始表 3.简单Group By 4.Group By 和 Order By 5.Group By中Select指定的字段限制 6.Group By All 7.Group By与聚合函 ...

  4. Hibernate框架的配置

    概念 持久化框架 把对象保存到数据库中,对数据的CURD操作 配置Hibernate 1.在项目中引入Hibernate的Jar包 在 WebContent/WEB-INF/lib 目录下 导入jar ...

  5. SQL Server 解读【已分区索引的特殊指导原则】（1）- 索引对齐

    一.前言 在MSDN上看到一篇关于SQL Server 表分区的文档:已分区索引的特殊指导原则,如果你对表分区没有实战经验的话是比较难理解文档里面描述的意思.这里我就里面的一些概念进行讲解,方便大家的 ...

  6. MVC4做网站后台:栏目管理2、修改栏目

    接上节添加栏目. 修改栏目与添加栏目非常相似,主要区别在于先向视图传递要修改栏目的model.另外在保存时比添加栏目验证要更多一些. 1.要验证父栏目不能是其本身: 2.父栏目不能是其子栏目: 3.父 ...

  7. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  8. Android实现不重复启动APP的方法

    转载博客:http://blog.sina.cn/dpool/blog/s/blog_5de73d0b0102vpai.html?utm_source=bshare&utm_campaign= ...

  9. ES6 - Note6：Set与Map

    Set和Map是ES6中新增的数据结构,Set是集合,无序唯一,Map类似于对象,也是"key-value"形式,但是key不局限于字符串. 1.Set的用法 Set是构造函数,可 ...

  10. 2014年百度之星程序设计大赛 - 初赛（第二轮）Chess

    题目描述:小度和小良最近又迷上了下棋.棋盘一共有N行M列,我们可以把左上角的格子定为(1,1),右下角的格子定为(N,M).在他们的规则中,“王”在棋盘上的走法遵循十字路线.也就是说,如果“王”当前在 ...