这里要介绍的是一个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. IDEA设置代码大小以及菜单栏大小

    IntelliJ IDEA设置菜单栏大小的方法:File --Settings --Appearance & Behavior -- Appearance ,右边Override defaul ...

  2. 【Win10 应用开发】语音命令与App Service集成

    昨天,老周演示了语音命令集成这一高大上功能,今天咱们来点更高级的语音命令. 在昨天的例子中,响应语音命令是需要启动应用程序的,那么如果可以不启动应用程序,就直接在小娜面板上进行交互,是不是会更高大小呢 ...

  3. OpenCASCADE Root-Finding Algorithm

    OpenCASCADE Root-Finding Algorithm eryar@163.com Abstract. A root-finding algorithm is a numerical m ...

  4. 深入理解javascript中的焦点管理

    × 目录 [1]焦点元素 [2]获得焦点 [3]失去焦点[4]焦点事件 前面的话 焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点.但却少有人对焦点管理系统地做总结归纳.本文 ...

  5. MyEclipse的项目中把 java EE 5 Libraries 删掉后怎么重新导入

    myeclipse中鼠标右击项目->properties->java Build Path=>Libraries=>Add Library...=>选择MyEclipse ...

  6. JSP页面静态化

    Ps:好久没写博客了,不是我太懒,是因为苦逼的我出差去上海了,天天加班 刚回成都.... 今天说说jsp页面静态化,知道静态化的朋友都不陌生,说白了就是访问后缀是html 而不是jsp. 没听说过静态 ...

  7. Objective-C中的老板是这样发通知的（Notification)

    ​    ​通知(Notification)简单的类比一下,公司的老总给下面的员工发通知啦,说明天公司要上市,各部门做一下准备工作.等通知发完,各部门收到后各司其职,做着自己该做的东西.假如Boss是 ...

  8. canvas的用法介绍

    目录 概述 绘图方法 图像处理方法 drawImage方法 getImageData方法,putImageData方法 toDataURL方法 save方法,restore方法 动画 像素处理 灰度效 ...

  9. CRL开发框架发布2.2版

    CRL 2.3.0.0 CRL是一个面向对象的轻便型ORM业务框架 数据处理使用了对象/数据映射,采用Lambda表达式来表示条件查询,增加了可编程性和可靠性,出错机率低,同时也能用原生的SQL实现查 ...

  10. android 如何正确使用 泛型 和 多参数 “偷懒”

    我要实现这样一个标题栏 共 4 个选项,采用布局是一个 TextView 对应一个小三角 ImageView,各个选项没被点击时,字体颜色是 黑色,小三角不显示,点击后,字体变色,小三角居下显示,同时 ...