这里要介绍的是一个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. 使用paramiko如何连接服务器？

    本文和大家分享的是python开发中使用paramiko连接服务器的方法和步骤,希望通过本文的,对大家学习和使用paramiko有所帮助. ssh连接步骤 1.ssh server建立server p ...

  2. SSIS Design4: 处理外键

    假设一种场景:有一个ETL系统,通过记录数据最后更新的时间,对数据进行增量更新.如果Data Warehouse中存在有外键关系的两个表,Group(GroupID,StudentID,GroupDa ...

  3. sizzle分析记录：关于querySelectorAll兼容问题

    querySelector和querySelectorAll是W3C提供的新的查询接口 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.O ...

  4. android知识点随笔

    android project中Manifest.xml中的<uses-sdk>标签元素决定的. 此标签包含如下3个属性: android:minSdkVersion —— 此属性决定你的 ...

  5. RequireJs调研

    背景 Problem(问题) Web sites are turning into Web apps(网站正转变为网络应用程序) Code complexity grows as the site g ...

  6. 【JVM】JVM系列之内存模型（六）

    一.前言 经过前面的学习,我们终于进入了虚拟机最后一部分的学习,内存模型.理解内存模型对我们理解虚拟机.正确使用多线程编程提供很大帮助.下面开始正式学习. 二.Java并发基础 在并发编程中存在两个关 ...

  7. 给ubuntu中的软件设置desktop快捷方式（以android studio为例）

    ubuntu的快捷方式都在/usr/share/applications/路径下有很多*.desktop(eclipse的快捷方式也可以类似设置) 下面就建立我们的studio sudo gedit ...

  8. jQuery-1.9.1源码分析系列（十六）ajax——响应数据处理和api整理

    ajax在得到请求响应后主要会做两个处理:获取响应数据和使用类型转化器转化数据 a.获取响应数据 获取响应数据是调用ajaxHandleResponses函数来处理. ajaxHandleRespon ...

  9. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  10. LINQ to SQL语句(15)之String

    LINQ to SQL支持以下String方法.但是不同的是默认情况下System.String方法区分大小写.而SQL则不区分大小写. 1.字符串串联(String Concatenation) v ...