1. [图片] lxdpie.jpg


​2. [文件] lqdpie.html ~ 801B     下载(7)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 
<script type="text/javascript" src="pie.js"></script>
</head>
<body>
   
    <fieldset style='position:relative;width:500px;height:400px;'>
            <legend> 刘强东吃饼</legend>
            <canvas id="p" width="500" height="400"   >Your browser does not support the HTML5 canvas tag.</canvas>
        </fieldset>
 
 
<script>
 
var config = {
    id: 'p',
    type: '%',
 
    data: [
['刘强东',18.4],['老虎基金',22.1],['HHGL',15.8],['DST',11.2],['BAI',9.5],['Fortune ising',5.3],['Kingdom',5.0],['红杉资本',2.0],
 
 ]
};
var p= pie(config);
    p.render();
 
</script>
 
 
</body>
</html>
3. [文件] pie.js ~ 3KB     
(function() {
    var Pie = (function() {
     
        var F = function(conf) {
                this.type=null;
                this.id=null;
                this.total=0;
                this.container=null;
                this.data=[];
                this.init(conf);
                return this;
            };
        F.prototype = {
            defaultBgcolor: ['deeppink', 'mediumslateblue', 'chartreuse', 'goldenrod', "#ffff00", "#2F368F", "#F6A25D", "#2CA8E0", "#77D1F6", '#181818', '#45AB35', "#336699", "#5fD1F6"],
 
            init: function(options) {
                for (var p in options) {
                    this[p] = options[p];
                }
                this.container = document.getElementById(this.id);
            },
            percentize: function() {
 
                if (this.type && this.type == '%') {
                    var sum = 0;
                    for (var i = 0; i < this.data.length; i++) {
                        sum += this.data[i][1];
                        if (this.data[i + 1] && (sum + this.data[i + 1][1]) > 100) {
                            break;
                        }
                    }
                    if (i != this.data.length) {
                        this.data = this.data.splice(0, i + 1);
                    }
                    if (sum != 100) {
                        this.data.push(['?', Math.ceil(100 - sum), '#282828']);
                    }
                } else {
                    var sum = 0;
 
                    for (var i = 0; i < this.data.length; i++) {
                        sum += this.data[i][1];
                    }
                    if (0 == this.total) {
                        this.total = sum;
                    }
                    
                    if (this.total - sum > 0) {
 
                        this.data.push(['?', this.total - sum, '#282828']);
                    }http://www.enterdesk.com/special/shouhui/​
 
                    for (var i = 0; i < this.data.length; i++) {
                        this.data[i][1] = Math.round((this.data[i][1] / this.total) * 100);
                    }手绘图片
                    
                }
  
 
            },
            renderPie: function() {
                var x = this.container.clientWidth * .33;
                var y = this.container.clientHeight * .5;
                var radius = (x > y) ? y : x;
                var ctx = this.container.getContext("2d");
                var startPoint = 0;
                for (var i = 0; i < this.data.length; i++) {
                    if (null == this.data[i][2]) {
                        this.data[i][2] = this.defaultBgcolor[i % this.defaultBgcolor.length];
                    }
                    ctx.fillStyle = this.data[i][2];
                    ctx.beginPath();
                    ctx.moveTo(x, y);
                    ctx.arc(x, y, radius, startPoint, startPoint + Math.PI * 2 * (this.data[i][1] / 100), false);
                    ctx.fill();
                    startPoint += Math.PI * 2 * (this.data[i][1] / 100);
                }
                return true;
            },
            renderLabel: function() {
                var table = ['<table  >'];
                for (var i = 0; i < this.data.length; i++) {
                    table.push('<tr><td bgcolor="');
                    table.push(this.data[i][2]);
                    table.push('">&nbsp;&nbsp;</td><td>');
                    table.push(this.data[i][0]);
                    table.push("</td><td align=right>");
                    if (this.type && this.type == '%') {
                        table.push(this.data[i][1] + "%");
                    } else {
                        table.push(Math.ceil(this.total * this.data[i][1] / 100));
                    }
                    table.push("</td></tr>");
                }
                table.push("</table>");
                this.container.insertAdjacentHTML("afterEnd", '<div   >  ' + table.join("") + '</div>');
            },
            render: function() {
                this.percentize();
                this.renderPie();
                this.renderLabel();
                return true;
            }
        };
        var Pie = function(conf) {
                return new F(conf);
            },
            r;
 
 
 
 
 
        return Pie;
 
    })();
 
 
    window.pie = Pie;
})(window);

html5 canvas画饼的更多相关文章

  1. HTML5 Canvas 画虚线组件

    前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...

  2. HTML5 Canvas 画钟表

    画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...

  3. CSS3进度条 和 HTML5 Canvas画圆环

    看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...

  4. html5 canvas画不出图像的原因

    很久没写博客了,今年过年的时候,家里出了意外,现在心里依然很难受.6月份之前一直忙着写毕业论文,答辩完6月初回公司继续上班,今天刚好周末有空,就写下之前碰到一个问题. 做一个图像查看器(基于Chrom ...

  5. 基于HTML5 Canvas的饼状图表实现教程

    昨天我们分享了一款基于HTML5的线性图表应用,效果非常不错,可以看在线DEMO或者实现教程.今天我们继续来分享一款基于HTML5的网页图表,它也是利用Canvas绘制的,但是和前面不同的是,这款图表 ...

  6. html5 canvas画流程图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. HTML5 Canvas画数字时钟

    先不说废话,没代码算个蛋. 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是时针,分针的逻辑都是一致的. 代码中有些坐标不知道为什么较不准,看看就好

  8. html5 canvas画进度条

    这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...

  9. html5 canvas 画hello ketty

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

随机推荐

  1. Java数组去掉反复的方法集

    经经常使用到,有时候不仅仅是简单的基本类型,那种能够用set集合去重,好多时间用到的是我们自己定义的类型,以下举个样例(我这儿就那int举例了): 方法一. 这样的类似与选择排序算法,首先我们取i值, ...

  2. 应用设置Setting的实现

    有非常多应用都在iOS设置中有相关的设置.例如以下图:     通过这个设置能够方便的相应用的一些主要的设置进行更改. 要完整的实现这个设置功能,有下面几方面问题须要解决: 1)设置的编写(实现设置的 ...

  3. ICON小工具如何使用

    对于ICON这个小资源,我们可以手动绘制.选择bmp图形的大小,尤其是旁边的选择工具(矩形或者弧形),我们可以通过选择工具挪动我们手动绘制的图标,其实图标只有中间那部分有用,其他没有用.还有最右边色拾 ...

  4. SVN 服务端、客户端安装及配置、导入导出项目

    http://blog.csdn.net/xcy13638760/article/details/12994923 http://www.cnblogs.com/armyfai/p/3985660.h ...

  5. Allegro skill

    https://blog.csdn.net/wyu0725/article/details/52367199 Allegro skill二次开发和更改菜单页面 简单的使用skill;能够使Aleggr ...

  6. SpringMVC hibernate增加多数据源 （SSHE/SYPRO增加多数据源为例）

    SpringMVC hibernate增加多数据源 (以类SSHE/SYPRO增加多数据源为例作说明) 注:适用与SpringMVC + Hibernate的项目.其它框架的仅仅能说作參考用 配置Sp ...

  7. ubantu 下 修改mysql 默认编码

    启动mysql后,以root登录mysql root@Eadgar-virtual-machine:~# mysql -uroot -proot mysql> show variables li ...

  8. git分支处理

    查看分支:git branch 创建分支:git branch <name> 切换分支:git checkout <name> 创建+切换分支:git checkout -b ...

  9. Appium python unittest pageobject如何实现加载多个case

    学习了Appium python项目施展的课程小伙伴都会有一个疑问,说现在所有的case都是通过一个suite进行一个方法一个方法进行添加的,但是在实际过程中我们不希望这样,我们做出来的功能是这样: ...

  10. 认识XmlReader

    认识XmlReader   摘要 XmlReader类是组成.NET的关键技术之一,极大地方便了开发人员对Xml的操作.通过本文您将对XmlReader有一个很好的认识,并将其应用到实际开发中. 目录 ...