<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="c"></canvas>

    <script>

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

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

        cv.width = 600;

        cv.height = 400;

        cv.style.border = "1px solid #000";

        // 角度转弧度方法

        function toRadian(angle) {

            return angle / 180 * Math.PI;

        }

        function toAngle(radain) {

            return radian / Math.PI * 180;

        }

        // 数据中的value值的和 为: 1

        /*var data = [{

            "value": .1,

            "color": "orange",

            "title": "社会招生"

        },{

            "value": .1,

            "color": "pink",

            "title": "公务员"

        },{

            "value": .1,

            "color": "gray",

            "title": "公开课"

        },{

            "value": .1,

            "color": "#909090",

            "title": "前端"

        },{

            "value": .2,

            "color": "red",

            "title": "应届生"

        },{

            "value": .3,

            "color": "blue",

            "title": "程序员"

        },{

            "value": .1,

            "color": "#abc",

            "title": "老司机"

        }];*/

        var data = [{

            "value": .9,

            "color": "orange",

            "title": "社会招生"

        },{

            "value": .1,

            "color": "pink",

            "title": "公务员"

        }];

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

            x0 = cv.width / 2, y0 = cv.height / 2,    // 圆心点坐标

            radius = 100,                              // 半径

            curAngle = 0,                              // 结束角度

            textX = 0, textY = 0,                    // 文字的坐标

            textOffset = 20,                        // 文字到饼型图的距离

            textWidth = 0,                            // 文字的宽度

            text2Line = 0;                            // 文字的起始位置到结束位置的长度

        data.forEach(function(value, index) {

            ctx.beginPath();

            // 1 先绘制饼型图

            curAngle = value.value * 360;

            ctx.fillStyle = value.color;

            ctx.moveTo(x0, y0);

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

            ctx.fill();

            // 2 绘制指向文字的线, 不要忘了将角度转化为弧度！！！

            textX = x0 + (radius + textOffset) * Math.cos( toRadian(startAngle + curAngle / 2) );

            textY = y0 +  (radius + textOffset) * Math.sin( toRadian(startAngle + curAngle / 2) );

            ctx.strokeStyle = value.color;

            ctx.moveTo(x0, y0);

            ctx.lineTo(textX, textY);

            ctx.stroke();

            // 3 绘制文字 和 文字的底线

            // 获取文字的宽度

            textWidth = ctx.measureText(value.title).width;

            if(textX <= x0) {

                // 设置文字的对齐方式 右对齐

                ctx.textAlign = "right";

                textOffset = -textOffset;

                textWidth = -textWidth;

            }

            // 3.1 绘制文字

            ctx.fillText(value.title, textX + textOffset, textY - 10);

            // 3.2 绘制文字的底线

            // 文字底线的长度 = 文字的x坐标 + 文字到线的偏移 + 文字的宽度

            text2Line = textX + textOffset + textWidth;

            ctx.moveTo(textX, textY);

            ctx.lineTo(text2Line, textY);

            ctx.stroke();

            // 赋值

            startAngle += curAngle;

            // 每次执行完，需要重新初始化偏移值

            // （因为上一次有可能改变了偏移值的符号）

            textOffset = 20;

        });

    </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绘制饼状图

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

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

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

  5. 用PNChart绘制饼状图简介

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

  6. canvas动态绘制饼状图，

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

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

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

  8. IOS之以UIBezierPath绘制饼状图

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

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

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

随机推荐

  1. jQuery访问json文件（一个例子）

    保存网址 打开时 点开一个类型 当点开一个类型,其他类型隐藏 回到所有类型 没有错,左下角有个这是什么样子的图标 做到了什么: 1.从json文件中取得网址,并根据访问次数排列,放到前面: 2.就是1 ...

  2. RabbitMQ学习之ConntectionFactory与Conntection的认知

    在发送和接收消息重要的类有:ConnectionFactory, Connection,Channel和 QueueingConsumer. ConntectionFactory类是方便创建与AMQP ...

  3. javase 超市库存系统

    package com.oracle.demo01; import java.util.ArrayList; import java.util.Scanner; public class Demo01 ...

  4. Substring Uva 11468_记忆化搜索 + AC自动机

    Code: #include<cstdio> #include<cstring> #include<queue> using namespace std; cons ...

  5. tomcat-manager 设置

    tomcat默认是没有用户登录控制的,需要登录manager,则需要配置角色与用户 1. 在conf/tomcat-users.xml中添加 <role rolename="manag ...

  6. 安装Mysql的一些问题，比如Net Connect 卸载不掉,注册表相关操作

    我安装mysql用了一段时间后卸载了,在安装就发现安装不了了,原因就是卸载的时候Net Connetc无法卸载,我试了一个月也没有解决后来百度各种还是没有办法解决.于是就尝试自己手动卸载注册表.在“开 ...

  7. C++基础 (5) 第五天 重载new delete () 只能操作符 自定义string类

    1 昨日回顾 1.static 对整个类共享 可以直接用 类::方法 调用 如果是私有的 可以提供一个静态的访问静态成员的方法 2 自定义的数组类-重载操作符[] 3 重载new和delete 4 重 ...

  8. js中浏览器兼容startsWith 、endsWith 函数

    在做js开发的时候用到了startsWith函数时,发现各个浏览器不兼容问题,因为对开发来说,chrome浏览器最好用,就一直在chrome浏览器中使用这两个函数没有任何问题,但在ie浏览器访问就直接 ...

  9. 训练1-R

    给出一个长度为N的数组,进行Q次查询,查询从第i个元素开始长度为l的子段所有元素之和. 例如,1 3 7 9 -1,查询第2个元素开始长度为3的子段和,1 {3 7 9} -1.3 + 7 + 9 = ...

  10. BZOJ 3878 [AHOI&JSOI2014]奇怪的计算器 (线段树)

    题面:BZOJ传送门 洛谷传送门 线段树好题 题目保证$a$一定是正整数,容易发现计算结果是单调的 我们把询问离线,并按照从小到大排序 某次操作可能导致某些位置达到边界$L/R$ 根据单调性的结论 这 ...