Tea9源码网 - 免费分享精品源码、教程、软件|全网干货资源收集,免费下载。

[代码分享]用HTML 5 canvas实现饼形数据图效果

发布:资源收集工2021-7-8 6:41分类: 技术教程 标签: HTML5 Canvas 饼形数据图

今天在Excel上看到一个饼状图,饼状图可以很直观的看出各数据的组成,作者就想着能不能在H5画布上画出来! 于是,作者这次写了一个饼形数据图,纯天然,绝对不添加任何"防腐剂";  完全是作者兴致所至所写 ,可能会有更简便的方法,还望前辈们指点迷津! PS: 函数已经大致封装好!可以改变各部分的颜色大小,percent数组填写的是各部分角度,mycolor数组填写的是各部分颜色; 后面由详细的注释。[代码分享]用HTML 5 canvas实现饼形数据图效果 HTML代码

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <title></title>
        <style type="text/css">
            body{
                margin: 0px;
            }
        </style>
        </head>
        <body>
                 
        </body>
</html>
JS代码
<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>
温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!

已有 2766 人阅读