文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么在html5中使用canvas实现一个动态画饼状图

2023-06-09 21:20

关注

怎么在html5中使用canvas实现一个动态画饼状图?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

先用canvas画实心圆

怎么在html5中使用canvas实现一个动态画饼状图

//伪代码var canvas = document.createElement("canvas");var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,开始角,结束角);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();

根据不同颜色绘制饼状图

//伪代码var canvas = document.createElement("canvas");var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,绿色开始角,绿色结束角);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,红色开始角,红色结束角);ctx.fillStyle = 'red';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,黄色开始角,黄色结束角);ctx.fillStyle = 'yellow';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,紫色开始角,紫色结束角);ctx.fillStyle = 'purple';ctx.closePath();ctx.fill();

动态绘制饼状图

动态绘制圆网上普遍推荐三种方法:requestAnimationFrame、setInterval(定时)、还有动态算角度的。

这里我用的是第一种requestAnimationFrame方式。

在编写的过程中发现一个问题,就是动态画圆时并不是以圆心的坐标画的。为了解决这一问题,需要在每次画圆时重新将canvas的画笔的坐标定义为最初圆心的坐标。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <style>        #graph {        }    </style></head><body><div id="circle" style="width: 500px;float: left;"></div></body></html><script type="text/javascript">(function(window,undefined){    var data = [        {"product":"产品1","sales":[192.44 ,210.54 ,220.84 ,230.11 ,220.85 ,210.59 ,205.49 ,200.55 ,195.71 ,187.46 ,180.66 ,170.90]},        {"product":"产品2","sales":[122.41 ,133.16 ,145.65 ,158.00 ,164.84 ,178.62 ,185.70 ,190.13 ,195.53 ,198.88 ,204.32 ,210.91]},        {"product":"产品3","sales":[170.30 ,175.00 ,170.79 ,165.10 ,165.62 ,160.92 ,155.92 ,145.77 ,145.17 ,140.27 ,135.99 ,130.33]},        {"product":"产品4","sales":[165.64 ,170.15 ,175.10 ,185.32 ,190.90 ,190.01 ,187.05 ,183.74 ,177.24 ,181.90 ,179.54 ,175.98]}    ]            var dom_circle = document.getElementById('circle');    if(dom_circle != undefined && dom_circle != null)    {        var canvas = document.createElement("canvas");        dom_circle.appendChild(canvas);        var ctx = canvas.getContext('2d');        var defaultStyle = function(Dom,canvas){            if(Dom.clientWidth <= 300)            {                canvas.width = 300;                Dom.style.overflowX = "auto";            }            else{                canvas.width = Dom.clientWidth;            }            if(Dom.clientHeight <= 300)            {                canvas.height = 300;                Dom.style.overflowY = "auto";            }            else            {                canvas.height = Dom.clientHeight;            }            //坐标轴区域            //注意,实际画折线图区域还要比这个略小一点            return {                p1:'green',                p2:'red',                p3:'yellow',                p4:'purple',                x: 0 ,    //坐标轴在canvas上的left坐标                y: 0 ,    //坐标轴在canvas上的top坐标                maxX: canvas.width ,   //坐标轴在canvas上的right坐标                maxY: canvas.height ,   //坐标轴在canvas上的bottom坐标                r:(canvas.width)/2,  //起点                ry:(canvas.height)/2,  //起点                cr: (canvas.width)/4, //半径                startAngle:-(1/2*Math.PI),               //开始角度                endAngle:(-(1/2*Math.PI)+2*Math.PI),     //结束角度                xAngle:1*(Math.PI/180)                   //偏移量            };        }        //画圆        var tmpAngle = -(1/2*Math.PI);        var ds = null;        var sum = data[0]['sales'][0]+data[0]['sales'][1]+data[0]['sales'][2]+data[0]['sales'][3]        var percent1 = data[0]['sales'][0]/sum * Math.PI * 2 ;        var percent2 = data[0]['sales'][1]/sum * Math.PI * 2 + percent1;        var percent3 = data[0]['sales'][2]/sum * Math.PI * 2 + percent2;        var percent4 = data[0]['sales'][3]/sum * Math.PI * 2 + percent3;        console.log(percent1);        console.log(percent2);        console.log(percent3);        console.log(percent4);        var tmpSum = 0;        var drawCircle = function(){                                    if(tmpAngle >= ds.endAngle)            {                return false;            }            else if(tmpAngle+ ds.xAngle > ds.endAngle)            {                tmpAngle = ds.endAngle;            }            else{                tmpAngle += ds.xAngle;                tmpSum += ds.xAngle            }            // console.log(ds.startAngle+'***'+tmpAngle);            // console.log(tmpSum);            // ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height);                        if(tmpSum > percent1 && tmpSum <percent2)            {                ctx.beginPath();                ctx.moveTo(ds.r,ds.ry);                ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent1,tmpAngle);                            ctx.fillStyle = ds.p2;            }            else if(tmpSum > percent2 && tmpSum <percent3)            {                ctx.beginPath();                ctx.moveTo(ds.r,ds.ry);                ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent2,tmpAngle);                ctx.fillStyle = ds.p3;            }            else if(tmpSum > percent3 )            {                ctx.beginPath();                ctx.moveTo(ds.r,ds.ry);                ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent3,tmpAngle);                ctx.fillStyle = ds.p4;            }            else{                ctx.beginPath();                ctx.moveTo(ds.r,ds.ry);                ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle,tmpAngle);                ctx.fillStyle = ds.p1;            }            ctx.closePath();            ctx.fill();            requestAnimationFrame(drawCircle);        }        this.toDraw = function(){            ds= defaultStyle(dom_circle,canvas);            // console.log(tmpAngle);            // console.log(ds.xAngle)            ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height);            drawCircle();        }        this.toDraw();        var self = this;        window.onresize = function(){            self.toDraw()        }    }})(window);    </script>

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网行业资讯频道,感谢您对编程网的支持。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯