<!DOCTYPE html>

<html>

    <head>

        <title>Canvas测试</title>

        <meta charset="utf8">

        <script>

            //绘制饼图

            function drawCircle(canvasId, data_arr, color_arr, text_arr)

            {

                var c = document.getElementById(canvasId);

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

                var radius = c.height / 2 - 20; //半径  canvas的一半, 利用半径确定其他图像的原点 

                var ox = radius + 20, oy = radius + 20; //圆心  

                var width = 30, height = 10; //右边图例说明 宽和高

                var posX = ox * 2 + 20, posY = 30;   //  右边图例说明 起点

                var textX = posX + width + 5, textY = posY + 10;  //右边文字 起点

                var startAngle = 0; //起始弧度

                var endAngle = 0;   //结束弧度  

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

                {

                    //绘制饼图

                    endAngle = endAngle + data_arr[i] * Math.PI * 2; //结束弧度 Math.PI * 2, 利用传入的比率 0.6

                    ctx.fillStyle = color_arr[i]; 

                    ctx.beginPath();

                    ctx.moveTo(ox, oy); //移动到到圆心

                    ctx.arc(ox, oy, radius, startAngle, endAngle, false);

                    ctx.closePath();  

                    ctx.fill();

                    startAngle = endAngle; //设置起始弧度  

                    //绘制比例图

                    ctx.fillStyle = color_arr[i];

                    ctx.fillRect(posX, posY + 20 * i, width, height);  

                       //绘制文字

                    ctx.moveTo(posX, posY + 20 * i);  

                    ctx.font = 'bold 12px 微软雅黑';    //斜体 30像素 微软雅黑字体

                    ctx.fillStyle = color_arr[i];   

                    var percent = text_arr[i] + "：" + 100 * data_arr[i] + "%";

                    ctx.fillText(percent, textX, textY + 20 * i);

                }

            }  

            function init() {

                //绘制饼图

                //比例数据和颜色

                var data_arr = [0.05, 0.25, 0.6, 0.1];

                var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400"];

                var text_arr = ["第一季度", "第二季度", "第三季度", "第四季度"];  

                drawCircle("canvas_circle", data_arr, color_arr, text_arr);

            }  

            //页面加载时执行init()函数

            window.onload = init;

        </script>  

    </head>

    <body>

        <h3>HTML5绘制饼图演示</h3>

        <p>

            <canvas id="canvas_circle" width="500" height="300" style="border:2px solid #0026ff;" >

                浏览器不支持canvas

            </canvas>

        </p>

    </body>

</html>

canvas - 饼状图的更多相关文章

  1. canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  2. canvas学习之饼状图

    接着上一节说,这次我使用canvas绘制了饼状图,主要是SectorGraph.js, 引入 import {canvasPoint} from '../../assets/js/canvas';im ...

  3. canvas+js画饼状图

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 封装构造函数，用canvas写饼状图和柱状图

    封装构造函数,用canvas写饼状图和柱状图 封装函数 // 场景 function XDLScence( options ) { this.stage = options.stage; //执行场景 ...

  5. canvas制作柱形图/折线图/饼状图，Konva写动态饼状图

    制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. HTML5之Canvas绘图实例——饼状图

    实现饼状分布画图(如下):调试环境:Firefox

  7. [BOT]自己动手实现android 饼状图，PieGraphView，附源码解析

    本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...

  8. 利用Tkinter和matplotlib两种方式画饼状图

    当我们学习python的时候,总会用到一些常用的模块,接下来我就详细讲解下利用两种不同的方式画饼状图.首先利用[Tkinter]中的canvas画布来画饼状图: from tkinter import ...

  9. Android之自定义控件实现天气温度折线图和饼状图

    以前写了个天气的APP,最近把他更新了一个版本,就抽取其中的天气温度折现图这个功能写了这篇博客,来与大家分享,希望对你有所帮助. 效果如图: 代码: MainActivity.Java /**** * ...

随机推荐

  1. python DES3 加密解密

    背景:想给公司的进件流程写一套进件脚本,首先遇到的就是加密解密.公司用的 DES3 + base64 加密解密 一.安装  pycrypto模块,推荐用pycrypto编译文件,直接下载安装就行 ht ...

  2. corethink功能模块探索开发（十八）前台页面插入jit前端数据可视化库

    效果图: 1.静态文件放入View目录中 在View目录下新建Public目录,在Public目录下新建js.css目录. 把jit的资源放入对应目录中 2.在html中引入jit Applicati ...

  3. iptables打开22,80,8080,3306等端口

    systemctl stop firewalld systemctl mask firewalld Then, install the iptables-services package: yum i ...

  4. 针对Oracle表 列字段的增加、删除、修改以及重命名操作sql

    增加字段语法:alter table tablename add (column datatype [default value][null/not null],….); 说明:alter table ...

  5. sql 中 in 与 exist 的区别

    可以 通过 where 条件 把 null的情况 筛选掉,已避免出现上述的情况. 1, exist 返回 true or  false:  in 返回  true  unknow. not之后 not ...

  6. Number使用笔记

    Numbe函数用于将对象转换为数字 0          0 null       0 空  0 ""         0 true      1 false     0 date ...

  7. 20145109 《Java程序设计》第八周学习总结

    Chapter 15 API java.util.logging package The constructor of Logger class is protected. If Logger ins ...

  8. Python引用多个模块，调用模块中的函数时，要注意的地方

    转自:http://blog.csdn.net/yjk13703623757/article/details/70237463 python模块是”从下到上”导入(import)的. 例如: a.py ...

  9. [算法]Plus One

    Question: Given a non-negative number represented as an array of digits, plus one to the number. The ...

  10. Swift学习笔记 - 位移枚举的按位或运算

    在OC里面我们经常遇到一些枚举值可以多选的,需要用或运算来把这些枚举值链接起来,这样的我们称为位移枚举,但是在swift里面却不能这么做,下面来讲解一下如何在swift里面使用 OC的位移枚举的区分 ...