<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx.cs" Inherits="JQGridExercise.WebForm10" %>
<!DOCTYPE html>
<html>
<head>
<title>Canvas测试</title>
<meta charset="gbk">
<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; //半径
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; //结束弧度
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]; //"#000000";
var percent = text_arr[i] + "：" + 100 * data_arr[i] + "%";
ctx.fillText(percent, textX, textY + 20 * i);
}
}
function init() {
//绘制饼图
//比例数据和颜色
var data_arr = [0.35, 0.25, 0.4];
var color_arr = ["#00FF21", "#FFAA00", "#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>
html5画饼形图的更多相关文章
-
HTML5画：线、圆、矩形、渐变
示例一:矩形 <!DOCTYPE html><head> <meta charset=utf-8> <title>HTML5画线.圆.矩形</ti ...
-
使用HTML5画饼图
在进行数据的统计分析时, 饼图也是比较经常用到的一类统计图. 需求分析: 一个饼图一般包含以下几部分: 1.标题 2.扇形 3.份额(百分比) 4.标识器 设计: ...
-
使用HTML5画柱状图
柱状图在很多应用中都比较常见,例如投票结果的统计分析,企业销售数据的统计分析等等. 需求分析: 一个柱状图一般包含以下几部分: 1.标题 2.横坐标(含标题) 3.竖坐标 (含标题.刻度 ...
-
一个给力的html5 画多边形的例子
只需改变参数就能画出你想要的多边形,代码简单!不得不惊叹canvas的强大! 代码奉上 <!doctype html> <html> <head> <meta ...
-
HTML5 画一张图
笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/33344289 一.绘制图像 使用drawImage()方法绘制图像. 画图环 ...
-
html5 画图板
8个最新炫酷的HTML5动画应用 http://www.php100.com/html/it/qianduan/2015/0107/8281.html 另外一个画板demo http://www.os ...
-
html5画四边形
<canvas id='test02'></canvas> <script> var canvas = document.getElementById('test0 ...
-
html5 画个圈
<html><body><canvas id="myCanvas" width="200" height="100&qu ...
-
Html5画钟表盘/指针实时跳动
1.最终效果 时钟.分钟.秒指针连续移动2.完整代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&q ...
随机推荐
-
java动态编译笔记
1 前言 Java的动态编译知识,真真在实际开发中并不是经常遇到.但是学习java动态编译有助于我们从更深一层次去了解java.对掌握jdk的动态代理模式,这样我们在学习其他一些开源框架的时候就能够知 ...
-
几款python集成开发环境
以下软件的测试环境为ArchLinux64位系统.对软件的介绍很粗略,详细介绍参考官网. 1-名称:eric 官网:http://eric-ide.python-projects.org/ 特点:该软 ...
-
【翻译】Sencha Touch2.4 The Layout System 布局
[翻译]The Layout System 布局 In Sencha Touch there are two basic building blocks: componentsand containe ...
-
不用不知道 apply()与call()的强大
在看关于javascript继承的时候 好多地方都用到了apply()和call() 之前在简单编程的时候根本没有遇到过 查阅资料后才发现这两个方法是如此的好用. 下面从几方面来看一下这两个方法: 1 ...
-
html5的自定义data-*属性与jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
-
java输出菱形
package test; public class Test { public static void main(String[] args) { for(int i=1;i<=4;i++){ ...
-
stylus or less ?
为什么不说SASS? 因为它需要安装Ruby,而一般的前端开发人员是不会特地去安装Ruby.我似乎更喜欢nodejs! ok,那么我们怎么在stylus和less 之间做出一个好的选择呢? 首先我本人 ...
-
error.c
#include <stdio.h> #include <errno.h> #include <stdlib.h> #include <string.h> ...
-
OpenGL(3)-三角形
写在前面 从这节开始,会接触到很多基本概念,原书我也是读了很多遍,一遍一遍去理解其中的意思,以及他们之间的关系. 概念 顶点数组对象:VAO 顶点缓冲对象:VBO 索引缓冲对象:EBO|IBO Ope ...
-
如何获取模拟器安装的app的位置
你可以死记下地址格式, 但是一旦不同的xcode和模拟器版本改变变了地址, 又得记, 从活动管理器里其实是可以直接查看的: Launch the app in the simulator Open A ...