<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="container">
    <canvas id="cavsElem">
        你的浏览器不支持canvas，请升级浏览器
    </canvas>
</div>
<script>
    (function(){
        var canvas=document.querySelector('#cavsElem');
        var ctx=canvas.getContext('2d');
        canvas.width=600;
        canvas.height=600;
        canvas.strokeStyle='1px solid #000';
        var data = [{
            "value": .2,
            "color": "red",
            "title": "应届生"
        },{
            "value": .3,
            "color": "blue",
            "title": "社会招生"
        },{
            "value": .4,
            "color": "green",
            "title": "老学员推荐"
        },{
            "value": .1,
            "color": "#ccc",
            "title": "公开课"
        }];
       var tempAngle=-90;
        for(var i=0;i<data.length;i++){
            x0=400;
            y0=400;
//            设置饼图的半径
            radius=200;
//            每次循环开始一个新路径
            ctx.beginPath();
//            将画笔移动到起始位置
            ctx.moveTo(x0,y0);
//            每个扇形的角度
            var angle=data[i].value*360;
            ctx.fillStyle=data[i].color;
//            将角度转化为弧度不，弧度rad=angle*Math.PI/180;
            var startAngle=tempAngle*Math.PI/180;
            var endAngle=(tempAngle+angle)*Math.PI/180;
//            绘制
            ctx.arc(x0,y0,radius,startAngle,endAngle);
            var x,y;
//            绘制文字的内容
            var txt=data[i].value*100+'%';
//            文字的位置在每个扇形的中间
            var txtAngle=tempAngle+1/2*angle;
            x=x0+Math.cos(txtAngle*Math.PI/180)*(radius+20);
            y=y0+Math.sin(txtAngle*Math.PI/180)*(radius+20);
//            设置文字的对齐方式ctx.textAlign:end是文字的尾部与线对齐
            if(txtAngle>90&&txtAngle<270){
                ctx.textAlign='end';
            }
            ctx.fillText(txt,x,y);
            ctx.fill();
            tempAngle+=angle;
        }
    }())
</script>
</body>
</html>

使用canvas绘制饼状图的更多相关文章

  1. 第166天：canvas绘制饼状图动画

    canvas绘制饼状图动画 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  2. [canvas]用canvas绘制饼状图

    折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. Canvas(3)---绘制饼状图

    Canvas(3)---绘制饼状图 有关canvas之前有写过两篇文章 1.Canvas(1)---概述+简单示例 2.Canvas(2)---绘制折线图 在绘制饼状图之前,我们先要理解什么是圆弧,如 ...

  4. 用PNChart绘制饼状图简介

    写在前面 最近做的小Demo中有一个绘制饼状图的需求.在开始实现之前上网了解了一下现有的一些绘制图形的第三方库,相应的库还是有挺多的,PNChart便是其中一个.PNChart是一个90后的中国boy ...

  5. canvas动态绘制饼状图，

    当我们使用Echrts很Highcharts的时候,总是觉得各种统计图表是多么神奇,今天我就用现代浏览器支持的canvas来绘制饼状统计图,当然仅仅是画出图并没什么难度,但是统计图一般都有输入,根据不 ...

  6. canvas绘制饼型图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Graphic系统综合练习案例-绘制饼状图

    这里用一个案例来将之前学过的关于绘制相关的东东加强巩固一下,纯绘制,木有加点击效果,先来看下最终效果: github中这种百分比饼图的效果非常非常之多,实际在项目中开发当产品有这样类似的需求时做为开发 ...

  8. IOS之以UIBezierPath绘制饼状图

    1.绘制的饼状图是通过多个扇形拼和而成,绘制一个扇形也是比较简单的,核心代码如下: 先画一条圆弧,再画半径,接着再画一条圆弧,最后闭合路径: UIBezierPath*  aPath = [[UIBe ...

  9. [Echarts]用Echarts绘制饼状图

    在项目网站的网页中,有这样一幅图: 心血来潮,想使用百度Echarts来绘制一下,可是没能绘制得完全一样,Echarts饼状图的label不能在图形下面放成一行,最后的效果是这样子的: 鼠标移动到it ...

随机推荐

  1. webservice(草稿)

    1.  概述 WebService是一种跨编程语言和跨操作系统平台的远程调用技术. Webservice是被定义用来使不同应用之间通过网络传输数据的一种标准,此标准和具体的语言无关,至于哪种语言提供接 ...

  2. [抄]使用网页进行展示而非PPT

    会议.演讲离不开幻灯片,它可以有效地辅助演讲者进行表达.目前一些流行的工具,比如Windows平台上的PowerPoint.Mac平台上的Keynote等工具,使得幻灯片的制作变得简单.但是这些幻灯片 ...

  3. url 中非法字符替换,java 正则替换

    url在传输时不允许的一些字符串,参考自:http://www.ietf.org/rfc/rfc1738.txt 以下字符用java正则替换为"_",一句话搞定: "{& ...

  4. HDU 3018 Ant Trip （欧拉回路）

    Ant Trip Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  5. Web压力架构

    原文地址:https://www.cnblogs.com/lori/archive/2015/03/27/4370827.html Web压力架构... 1 一 系统性能测试概述... 1 1.1 性 ...

  6. 【php】thinkphp以post方式查询时分页失效的解决方法

    好久没有写博客了,最近说实话有点忙,各个项目都需要改bug.昨天晚上一直没有解决的php项目中的bug,就在刚才终于搞定,在这里还需要感谢博客园大神给的帮助! 具体问题描述 最近遇到一个非常棘手的问题 ...

  7. 【Linux】字符转换命令join

    join 看字面上的意义 (加入/参加) 就可以知道,他是在处理两个文件之间的数据,而且,主要是在处理『两个文件当中,有 "相同数据" 的那一行,才将他加在一起』的意思.我们利用底 ...

  8. Android Studio：正确导入SO相关文件

      导入so文件有2种方式 第一种: 使用jniLibs文件夹导入so文件,则仅需将所有cpu类型的文件夹拷进去. 在project结构下,module目录下创建libs文件夹,放入jar文件:在sr ...

  9. process credentials(三)

    主要内容包括: 1.进程描述符中Realtime Mutex相关数据结构的初始化 2.子进程如何复制父进程的credentials 3.per-task delay accounting的处理 4.子 ...

  10. JetBrains PyCharm专业版激活

    PyCharm最新2018激活码 激活时选择License server 填入 http://idea.imsxm.com 然后点击Active即可 PS:在线激活有一个过期时间,这个时间一过就必须再 ...