利用html5 canvas动态画饼状图的示例代码
- 作者: 喜欢被宠着你
- 来源: 51数据库
- 2021-08-31
本文介绍了利用html5 canvas动态画饼状图的示例代码，分享给大家，具体如下：
先来看效果图
这里并没引用jquery等第三方库，只是用dom操作和canvas的特性编写的。
canvas画圆大体分为实心圆和空心圆。
根据需求分析知道该圆为实心圆。
1.先用canvas画实心圆
//伪代码
var canvas = document.createelement("canvas");
var ctx = canvas.getcontext('2d');
ctx.beginpath();
ctx.arc(圆心x轴坐标,圆心y轴坐标,半径,开始角,结束角);
ctx.fillstyle = 'green';
ctx.closepath();
ctx.fill();
2.根据不同颜色绘制饼状图
//伪代码
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();
3.动态绘制饼状图
动态绘制圆网上普遍推荐三种方法：requestanimationframe、setinterval（定时）、还有动态算角度的。
这里我用的是第一种requestanimationframe方式。
在编写的过程中发现一个问题，就是动态画圆时并不是以圆心的坐标画的。为了解决这一问题，需要在每次画圆时重新将canvas的画笔的坐标定义为最初圆心的坐标。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#graph {
/* border: 1px solid black;
height: 100%;
width: 100%;
box-sizing: border-box;*/
}
</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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
推荐阅读
