这里要介绍的是一个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. iOS--知识综合应用成就时髦小功能点

    iOS--知识综合应用成就时髦小功能点

  2. Sql Server系列：视图

    视图是数据库中的一种虚拟表,与真实的表一样,视图包含一系列带有名称的行和列数据.行和列数据用来自定义视图的查询所引用的表,并且在引用视图时动态生成. 1. 视图的概念 视图是从一个或者多个表中导出的, ...

  3. SQL Server 2014新特性探秘(3)-可更新列存储聚集索引

    简介      列存储索引其实在在SQL Server 2012中就已经存在,但SQL Server 2012中只允许建立非聚集列索引,这意味着列索引是在原有的行存储索引之上的引用了底层的数据,因此会 ...

  4. c#写windows服务

    序言 前段时间做一个数据迁移项目,刚开始用B/S架构做的项目,但B/S要寄存在IIs中,而IIs又不稳定因素,如果重启IIs就要打开页面才能运行项目.有不便之处,就改用Windows服务实现.这篇就总 ...

  5. JSONP详解

    0.关于JSONP 什么的JSONP JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域要资料.另一个解决这个问题的新方法是跨来源资源共享. ...

  6. 手动实现jQuery Tools里面tab功能

    平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的.当然有时同事喜欢使用jQuery UI里面的插件.并且jQuery ...

  7. canvas学习和面向对象(二)

    Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...

  8. Cesium原理篇：7最长的一帧之Entity(下)

    上一篇,我们介绍了当我们添加一个Entity时,通过Graphics封装其对应参数,通过EntityCollection.Add方法,将EntityCollection的Entity传递到DataSo ...

  9. Asp.Net 使用Npoi导出Excel

    引言 使用Npoi导出Excel 服务器可以不装任何office组件,昨天在做一个导出时用到Npoi导出Excel,而且所导Excel也符合规范,打开时不会有任何文件损坏之类的提示.但是在做导入时还是 ...

  10. 【Java基础】并发

    Num1:同步访问共享的可变数据 关键字Synchronized可以保证在同一时刻,只有一个线程可以执行某一个方法,或者某一个代码块.. 同步不仅仅理解为互斥的方式,如果没有同步,一个线程的变化就不能 ...