好友
阅读权限10
听众
最后登录1970-1-1
|
本帖最后由 弱弱的小粥粥 于 2016-10-21 10:10 编辑
今天在Excel上看到一个饼状图，饼状图可以很直观的看出各数据的组成，我就想着能不能在H5画布上画出来！
于是乎，楼主这次写了一个 饼形数据图，纯天然，绝对不添加任何"防腐剂"；
完全是楼主 兴致所至所写 ，可能会有更简便的方法，还望前辈们指点迷津！
PS: 函数已经大致封装好！可以改变各部分的颜色大小，percent数组填写的是各部分角度，mycolor数组填写的是各部分颜色；
后面由详细的注释
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
margin: 0px;
}
</style>
</head>
<body>
</body>
</html>
[JavaScript] 纯文本查看 复制代码 <script type="text/javascript" language="javascript">
window.onload=function () {
// 创建画布
var canvas=document.createElement('canvas');
canvas.style.border="2px solid #aaaaaa";
canvas.width=700;
canvas.height=700;
var brush=canvas.getContext("2d");
// 包裹画布居中
var box=document.createElement('div');
// box样式
box.style.width=canvas.width+"px";
box.style.height=canvas.height+"px";
box.style.margin="100px auto";
// 移动块
var move=document.createElement('span');
// move样式
move.style.color="#ff0000";
move.style.position="absolute";
move.style.display="none";
move.style.boxShadow="1px 1px 8px red";
// 添加对象
document.body.appendChild(box);
document.body.appendChild(move);
box.appendChild(canvas);
// 避免重复获取画布大小
var x=canvas.offsetLeft;
var y=canvas.offsetTop;
function mymove (event) {
move.style.display="block";
move.style.left=event.pageX-50+"px";
move.style.top=event.pageY-50+"px";
move.innerHTML="当前画布坐标："+(event.clientX-x-2)+","+(event.clientY-y-2);
}
function myout () {
move.style.display="none";
}
canvas.onmousemove=mymove;
canvas.onmouseout=myout;
// ----------------------------------------------------------
brush.translate(350,350);//定点圆心
var mycolor=["#FF0000","#FF7F00","#FFFF00","#00FF00","#00FFFF","#0000FF"];//设置圆环各块颜色
var percent=[20,30,50,70,120,70];//设置圆环各块所占角度,也可以自行转行成百分比
var big_arc_r=300;//设置圆环大圆半径
var small_arc_r=100;//设置圆环小圆半径
var myDeg=-90;//设置初始旋转角度
var i=0;
function ring() {
if (i<percent.length) {
brush.save();
brush.rotate(Math.PI/180*myDeg);//圆环旋转
brush.beginPath();
brush.fillStyle=mycolor[i];//填充颜色
brush.arc(0,0,small_arc_r,Math.PI/180*percent[i],0,true);//逆时针画小圆弧
brush.arc(0,0,big_arc_r,0,Math.PI/180*percent[i],false);//顺时针画大圆弧
brush.fill();
brush.restore();
myDeg+=percent[i];//储存下一次需要旋转的角度
i++;
}else{
clearInterval(timer)
}
}
timer=setInterval(ring,100);
}
</script>
话不多说！只求分享！不求点赞！
|
免费评分
-
查看全部评分
|
发帖前要善用【论坛搜索】功能，那里可能会有你要找的答案或者已经有人发布过相同内容了，请勿重复发帖。 |
|
|
|
|
|
|
发表于 2016-10-20 21:54
