html js 扇形统计图_canvas绘制扇形统计图

今天偷懒了，把上次的作业代码记录在这里好了。

绘制简单的扇形统计图需要用到JS插件，绘制完以后的代码是这样的：

今天有点晚了把代码记录一下：

*{ margin:0px; padding:0px;}

body{ text-align:center}

#can1{ width:400px; height:400px;}

$(function(){

var canv=document.getElementById("can1");

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

var num=[300,300,300];

var col=["#F00","#00f","#060"]

var j=0,j1=0,j2=0,jiao=0;

var sun=0;

for(var i=0;i

sun=sun+num[i];

}

for(var i=0;i

j=2*Math.PI*num[i]/sun;

j2=j1+j;

ctx.beginPath();

ctx.fillStyle=col[i];

ctx.arc(canv.width/2,canv.height/2,120,j1,j2,false);

ctx.lineTo(canv.width/2,canv.height/2);

ctx.closePath();

ctx.fill();

jiao=j1+j/2;

ctx.font="20px Arial";

ctx.fillStyle="#000";

j1=j1+j;

}

})

好了，这个就是上面图形的代码，但是要加JS哦！

html js 扇形统计图_canvas绘制扇形统计图相关推荐

hdc mfc 画扇形图_canvas画扇形、饼图
画扇形的方法方法一:起始角度是0,那么第一条线就是line(r,0),通过旋转扇形的角度,第二条线就是line(r,0) //圆弧 ctx.save(); ctx.translate(100, 10 ...
Canvas之使用弧度绘制扇形图
一.体现曲线的绘制首先需要明白角度和弧度的关系: 一个角度等于π/180个弧度 1. 根据点动成线的概念绘制圆弧(利用函数) 比如: y = x/2 y = (x + 2) ^2 y = sin(x ...
html js 扇形统计图_Html5饼图绘制实现统计图的方法
这篇文章我们来讲一下在网站建设中,Html5饼图绘制实现统计图的方法.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. Html5提供了强大的绘图API,让我们能够使用java ...
Asp.Net实例：C# 绘制统计图（三） ——扇形统计图的绘制
三. 扇形统计图的绘制<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /& ...
用canvas画布绘制扇形和弧线
<title>用canvas画布绘制扇形和弧线</title> <style> .box{ width: 600px; margin: 0 auto; } < ...
vue + canvas绘制扇形圆盘
vue + canvas绘制扇形圆盘 html: <canvas style="position: fixed;z-index:-1" width="545&quo ...
html一个页面同时加载多个饼图,Html5饼图绘制实现统计图的方法
Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图(统计图)的方法.先看一下饼图效果: 这个图是动态生成的,根据传入的比例参数( ...
绘制扇形的多种方式，包括border-radius、clip裁剪显示、canvas原点变换等方式的详细理解及demo
对clip的理解: clip是对使用了该样式的元素进行裁剪显示.使用方法是rect (top, right, bottom, left) 其中参数top代表显示的区域上边界离该元素顶部border-t ...
php扇形分布图,使用php绘制扇形分布图
首先创建一个表单提交的页面,并且使用session会话的方式,将表单提交的值保存到session会话中,表单页面的代码我就不写了,获取到值以后对数据进行处理,然后绘制成图: 具体绘制与数据处理代码: ...

html js 扇形统计图_canvas绘制扇形统计图

html js 扇形统计图_canvas绘制扇形统计图相关推荐

最新文章

热门文章