<!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. keras 学习文档

    https://github.com/fchollet/keras-resources https://keras.io/

  2. go——基本构成要素

    Go的语言符号又称为词法元素,共包括5类内容: 标识符(identifier) 关键字(keyword) 字面量(literal) 分隔符(delimiter) 操作符(operator)它们可以组成 ...

  3. hadoop26----netty，多个handler

    k客户端: package cn.itcast_03_netty.sendorder.client; import io.netty.bootstrap.Bootstrap; import io.ne ...

  4. C# 中与等于 &= 操作符

    MSDN说,x&=y等价于 x=x&y. 整型时&运算符,进行位运算. bool类型时,&运算符,当两边结果都为ture时,结果才为true.

  5. Python3.x：实现多任务（多进程）

    Python3.x:实现多任务(多进程) # python3 # author lizm # datetime 2018-02-13 16:00:00 # -*- coding: utf-8 -*- ...

  6. 纯CSS3实现GIF图片动画效果

    在线演示 本地下载

  7. APPIUM API整理（python）---元素查找

    最近在学习自动化框架appium,网上找一些API相关资料整理了一下 1.find_element_by_id find_element_by_id(self, id_): Finds element ...

  8. MapReduce:输入是两个文件，file1代表工厂表，包含工厂名列和地址编号列；file2代表地址表，包含地址名列和地址编号列。要求从输入数据中找出工厂名和地址名的对应关系，输出"工厂名----地址名"表

    文件如下: file1: Beijing Red Star Shenzhen Thunder Guangzhou Honda Beijing Rising Guangzhou Development ...

  9. react native 中的ReadableMap和WritableMap的使用

    react native跟安卓原生交互的数据类型中,有两个比较陌生的类型,ReadableMap和WritableMap. ReadableMap和WritableMap,顾名思义,反正是map. W ...

  10. 配置内核 Makefile:1449: *** mixed implicit and normal rules. Stop.【转】

    本文转载自:https://blog.csdn.net/bitowang/article/details/8446494 在编译内核的时候提示Makefile:1449: *** mixed impl ...