<!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. (转)VLC播放RTP打包发送的.264文件

    VLC播放RTP打包发送的.264文件 1,要有一个发送RTP包的264文件的服务器; 具体代码如下: rtp.h #include <WinSock2.h> #pragma commen ...

  2. Python函数加工厂-装饰器

    引言: 函数和装饰器好比程序界的加工厂: 1.函数一般可用来加工一种或者多种数据类型的数据:字符串.数字.列表.字典等 举一个简单例子:已知半径求面积 def s(r): s = 3.14 * r * ...

  3. selenium破解数字验证码

    搞了半天,总算弄出来了,识别率还可以,普通的数字验证码 from selenium import webdriver from PIL import Image import pytesseract ...

  4. $python数据分析基础——初识numpy库

    numpy库是python的一个著名的科学计算库,本文是一个quickstart. 引入:计算BMI BMI = 体重(kg)/身高(m)^2 假如有如下几组体重和身高数据,让求每组数据的BMI值: ...

  5. npm国内镜像设置

    http://cnodejs.org/topic/4f9904f9407edba21468f31e

  6. ES6 随记（3.4.1）-- 函数的拓展（参数默认值，扩展运算符）

    上一章请见: 1. ES6 随记(1)-- let 与 const 2. ES6 随记(2)-- 解构赋值 3. ES6 随记(3.1)-- 字符串的拓展 4. ES6 随记(3.2)-- 正则的拓展 ...

  7. Spring MVC 之传递模型数据到视图中

    类似于 JSP-Servlet 中的 req.setAttribute . req.getSession().setAttribute ... --> 最后在 JSP 用 EL 表达式取得这些数 ...

  8. Secondary ,Supplementary alignment 和bwa mem的-M -Y参数

    1.supplementary alignment supplementary alignment是指一条read的一部分和参考区域1比对成功,另一部分和参考区域2比对成功,参考区域1和参考区域2没有 ...

  9. mysql 进阶查询（学习笔记）

    学习笔记,来源:实验楼 ,链接: https://www.shiyanlou.com/courses/9   一.日期计算: 1.要想确定每个宠物有多大,可以使用函数TIMESTAMPDIFF()计算 ...

  10. Source Insight 插件

    一提到外挂程序,大家肯定都不陌生,QQ就有很多个版本的去广告外挂,很多游戏也有用于扩展功能或者作弊的工具,其中很多也是以外挂的形式提供的.外挂和插件的区别在于插件通常依赖于程序的支持,如果程序不支持插 ...