[canvas]用canvas绘制饼状图

时间：2021-03-17 12:12:55

折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<canvas id="cv"></canvas>

<script>

    var cv=document.getElementById("cv");

    cv.style.border = "1px solid red";

    cv.width = 600;

    cv.height = 400;

    var ctx = cv.getContext("2d");

    // 弧度转化为角度

    function toAngle(radian) {

        return radian / Math.PI * 180;

    }

    // 角度转化为弧度

    function toRadian(angle) {

        return angle / 180 * Math.PI;

    }

    //根据数据画饼

    var data=[{

        "value": .1,

        "color": "purple",

        "title": "社会招生"

    },{

        "value": .1,

        "color": "rebeccapurple",

        "title": "公务员"

    },{

        "value": .1,

        "color": "red",

        "title": "公开课"

    },{

        "value": .1,

        "color": "rosybrown",

        "title": "前端"

    },{

        "value": .2,

        "color": "royalblue",

        "title": "应届生"

    },{

        "value": .3,

        "color": "saddlebrown",

        "title": "程序员"

    },{

        "value": .1,

        "color": "salmon",

        "title": "老司机"

    }];

    var startAngle=-90,  //饼图起始角度

            x0=300,        //圆心x的坐标

            y0=200,         //圆心y的坐标

            radius=100,     //圆的半径

            step= 0,        //定义扇形增加角度的变量

            line=20;        //画线的时候超出半径的一段线长

    //画饼

    for (var i = 0; i < data.length; i++) {

        ctx.beginPath();  //开启新路径

        step=data[i].value*360;  //根据数据计算增加的角度

        var lineAngle=startAngle+step/2;   //计算线的角度

        ctx.moveTo(x0,y0);

        ctx.arc(x0,y0,radius,toRadian(startAngle),toRadian(startAngle+=step));

        ctx.fillStyle=data[i].color;

        ctx.fill();

        ctx.beginPath();

        //画线

        //圆弧上的点坐标 (x0+r*Math.cos(toRadian(lineAngle/2)),y0+r*Math.sin(toRadian(linAngle/2)))

        var  x1=x0+(radius+line)*Math.cos(toRadian(lineAngle)),//圆弧上线与圆相交点的x坐标

             y1=y0+(radius+line)*Math.sin(toRadian(lineAngle)),//圆弧上线与圆相交点的y坐标

             //获取文本长度

             textW=ctx.measureText(data[i].title).width,

             linePadding=60;

        ctx.moveTo(x0,y0);

        ctx.lineTo(x1,y1);

        ctx.strokeStyle=data[i].color;

        ctx.stroke();

        ctx.beginPath();

        var textPadding=10;  //文字与线之间的间距

        ctx.moveTo(x1,y1);

        //当圆弧x轴坐标大于圆心的x轴坐标,线向右画,linepadding为正值

        if(x1>=x0){

            ctx.lineTo(x1+linePadding,y1);

            //绘制文字 //textpadding同理

            ctx.fillText(data[i].title,x1+textPadding,y1-textPadding);

        }else{

            ctx.lineTo(x1-linePadding,y1);

            //使左边的文字右对齐

            ctx.textAlign="right";

            ctx.fillText(data[i].title,x1-textPadding,y1-textPadding);

        }

        ctx.strokeStyle=data[i].color;

        ctx.stroke();

    }

</script>

</body>

</html>

[canvas]用canvas绘制饼状图显示效果图

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

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

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

  2. Canvas&lpar;3&rpar;---绘制饼状图

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

  3. 用PNChart绘制饼状图简介

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

  4. canvas动态绘制饼状图，

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

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

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

  6. IOS之以UIBezierPath绘制饼状图

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

  7. &lbrack;Echarts&rsqb;用Echarts绘制饼状图

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

  8. d3绘制饼状图

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

  9. matplotlib绘制饼状图

    源自http://blog.csdn.net/skyli114/article/details/77508430?ticket=ST-41707-PzNbUDGt6R5KYl3TkWDg-passpo ...

随机推荐

  1. JavaScript 的同源策略

    同源策略限制了一个源(origin)中加载文本或脚本与来自其它源(origin)中资源的交互方式. 同源定义 如果两个页面拥有相同的协议(protocol),端口(如果指定),和主机,那么这两个页面就 ...

  2. iOS工程集成支付宝错误Undefined symbols for architecture armv7

    问题描述: 新工程中需要集成支付宝功能,于是咱就把支付宝的库给集成了进入然后就出现了下面这种错误了说,错误信息如下: Undefined symbols for architecture armv7: ...

  3. Visual Studio 2013开启JavaScript的智能提示功能

    在前一次的发布的时候,我们共享了Visual Studio 2013中Windows Azure移动服务的集成和功能.其中包含了移动服务表脚本的编辑能力的介绍.这一次的发布,我们将描述在Visual ...

  4. Spark、Shark集群安装部署及遇到的问题解决

    1.部署环境 OS:Red Hat Enterprise Linux Server release 6.4 (Santiago) Hadoop:Hadoop 2.4.1 Hive:0.11.0 JDK ...

  5. 数据库分库分表&lpar;sharding&rpar;系列&lpar;四&rpar; 多数据源的事务处理

    系统经sharding改造之后,原来单一的数据库会演变成多个数据库,如何确保多数据源同时操作的原子性和一致性是不得不考虑的一个问题.总体上看,目前对于一个分布式系统的事务处理有三种方式:分布式事务.基 ...

  6. VS2010中查询替换使用

    MSDN:http://msdn.microsoft.com/zh-cn/library/afy96z92.aspx 例子:

  7. python成长之路10——socketserver源码分析

    s = socket.socket(socket.AF_INET,socket.SOCK_STREAM,0) 参数一:地址簇 socket.AF_INET ipv4(默认) socket.AF_INE ...

  8. Zen Coding css&comma;html缩写替换大观 快速写出html&comma;css

    阅读本文,先仔细阅读网站文章. Zen Coding 快速编写HTML/CSS代码的实现 复制代码 代码如下:E 元素名称(div, p); E#id 使用id的元素(div#content, p#i ...

  9. layer弹出层中H5播放器全屏出错解决 &amp&semi; 属性poster底图占满&lt&semi;video&gt&semi;的方法

    1. 在layer弹窗组件中 如果使用了flash播放器,全屏是正常的 但若使用了HTML5的播放器,全屏失效 举个栗子 <!DOCTYPE html> <html> < ...

  10. 云计算之路-阿里云上： RDS实例CPU跑满引发的故障

    今天上午 10: 40 左右,我们所使用的阿里云 RDS 实例的 CPU 突然飙高到近 100% ,造成大量数据库查询操作缓慢.超时,在这个恶劣条件下大量 memcached 缓存无法建立,这样的雪上 ...

相关文章