<!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. BCrypt 加密实现

    Bcrypt百度百科: bcrypt,是一个跨平台的文件加密工具.由它加密的文件可在所有支持的操作系统和处理器上进行转移.它的口令必须是8至56个字符,并将在内部被转化为448位的密钥. 除了对您的数 ...

  2. Longest Palindromic Substring-Dynamic Programing

    Longest Palindromic Substring Given a string S, find the longest palindromic substring in S. Analysi ...

  3. 【教程】Microsoft Visual Studio 2015 安装Android SDK

    http://blog.sina.com.cn/s/blog_51f9ffaa0102vuhy.html Hi,大家好,自vs2015发布后,有很多小伙伴尝试使用VS2015开发安卓,由于是新手,一折 ...

  4. js验证真实姓名

    var regName = /^[\u4e00-\u9fa5]{2,4}$/; if (!regName.test(examinee.name)) { wx.showToast({ title: &q ...

  5. idea 快键件大全

    最常用快捷键1.Ctrl+E,可以显示最近编辑的文件列表2.Shift+Click可以关闭文件3.Ctrl+[或]可以跳到大括号的开头结尾4.Ctrl+Shift+Backspace可以跳转到上次编辑 ...

  6. 94. Binary Tree Inorder Traversal（二叉树中序遍历）

      Given a binary tree, return the inorder traversal of its nodes' values. For example:Given binary t ...

  7. 20145222黄亚奇《网络对抗》 逆向及BOF进阶实践学习总结

    20145222<网络对抗> 逆向及BOF进阶实践学习总结 实践目的 1.注入shellcode 2.实现Return-to-libc攻击 知识点学习总结 Shellcode实际是一段代码 ...

  8. 编写第一个Shell脚本【TLCL】

    怎样编写一个 Shell 脚本 编写一个脚本 使脚本文件可执行 把脚本放到Shell能够找到的地方 脚本文件格式 #!/bin/bash # This is our first script. ech ...

  9. No module named yum

    升级python之后,执行yum的时候可能出现错误,类似: There was a problem importing one of the Python modulesrequired to run ...

  10. VS 安装部署项目自解压程序解压后按顺序执行多个程序

    这篇blog介绍了如何用VS创建安装部署方案,以及如何制作自解压程序.然后我的程序中需要解压后按照顺序先后安装2个exe.winrar的解压后执行,虽然可以用分号填写多个应用,但貌似是同时执行的.为了 ...