【分享】H5 canvas 饼形数据图beta

弱弱的小粥粥 发表于 2016-10-20 21:54

本帖最后由弱弱的小粥粥于 2016-10-21 10:10 编辑

今天在Excel上看到一个饼状图，饼状图可以很直观的看出各数据的组成，我就想着能不能在H5画布上画出来！
于是乎，楼主这次写了一个饼形数据图，纯天然，绝对不添加任何"防腐剂"；
完全是楼主兴致所至所写，可能会有更简便的方法，还望前辈们指点迷津！
PS: 函数已经大致封装好！可以改变各部分的颜色大小，percent数组填写的是各部分角度，mycolor数组填写的是各部分颜色；
后面由详细的注释

<!DOCTYPE html>
<html>
   <head>
            <meta charset="utf-8" />
            <title></title>
   <style type="text/css">
         body{
            margin: 0px;
         }
   </style>
   </head>
   <body>

   </body>
</html>
<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=;//设置圆环各块所占角度,也可以自行转行成百分比
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;//填充颜色
brush.arc(0,0,small_arc_r,Math.PI/180*percent,0,true);//逆时针画小圆弧
brush.arc(0,0,big_arc_r,0,Math.PI/180*percent,false);//顺时针画大圆弧
brush.fill();
brush.restore();
myDeg+=percent;//储存下一次需要旋转的角度
i++;
}else{
clearInterval(timer)
}
}
timer=setInterval(ring,100);
}
</script>
话不多说！只求分享！不求点赞！

ablack 发表于 2016-10-20 22:16

虽然看着不是很高大上，但是写代码也是比较辛苦的

sgyz520 发表于 2016-10-20 23:36

辛苦楼主！顶一个

psx1lin 发表于 2016-10-23 12:40

太強了
學習了

哦是酱紫 发表于 2016-11-13 10:01

h5还可以这么玩。

五脊六兽 发表于 2016-11-13 17:17

复制下来代码研究研究~谢楼主~

Sheng667 发表于 2016-11-14 00:24

楼主辛苦啦

页: [1]

吾爱破解 - 52pojie.cn's Archiver

【分享】H5 canvas 饼形数据图beta