本篇内容介绍了“Html5中如何绘制数据统计图”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

全部代码如下：

<!DOCTYPEhtml><html><head><title>Canvas测试</title><metacharset="UTF-8"><script>//绘制饼图functiondrawCircle(canvasId,data_arr,color_arr,text_arr){varc=document.getElementById(canvasId);varctx=c.getContext("2d");varradius=c.height/2-20;//半径varox=radius+20,oy=radius+20;//圆心varwidth=30,height=10;//图例宽和高varposX=ox*2+20,posY=30;//vartextX=posX+width+5,textY=posY+10;varstartAngle=0;//起始弧度varendAngle=0;//结束弧度for(vari=0;i<data_arr.length;i++){//绘制饼图endAngle=endAngle+data_arr[i]*Math.PI*2;//结束弧度ctx.fillStyle=color_arr[i];ctx.beginPath();ctx.moveTo(ox,oy);//移动到到圆心ctx.arc(ox,oy,radius,startAngle,endAngle,false);ctx.closePath();ctx.fill();startAngle=endAngle;//设置起始弧度//绘制比例图及文字ctx.fillStyle=color_arr[i];ctx.fillRect(posX,posY+20*i,width,height);ctx.moveTo(posX,posY+20*i);ctx.font='bold12px微软雅黑';//斜体30像素微软雅黑字体ctx.fillStyle=color_arr[i];//"#000000";varpercent=text_arr[i]+"："+100*data_arr[i]+"%";ctx.fillText(percent,textX,textY+20*i);}}functioninit(){//绘制饼图//比例数据和颜色vardata_arr=[0.05,0.25,0.6,0.1];varcolor_arr=["#00FF21","#FFAA00","#00AABB","#FF4400"];vartext_arr=["第一季度","第二季度","第三季度","第四季度"];drawCircle("canvas_circle",data_arr,color_arr,text_arr);}//页面加载时执行init()函数window.onload=init;</script></head><body><h4>HTML5绘制饼图演示</h4><p><canvasid="canvas_circle"width="500"height="300">浏览器不支持canvas</canvas></p></body></html>

这个函数可以直接使用，如果想做的更漂亮，可以增加一些额外的美观绘制。

本代码最大的灵活性是将绘制参数与绘制代码分离，饼图大小根据Canvas容器高度自动调整。传递参数方式如下：

vardata_arr=[0.05,0.25,0.6,0.1];//比例数据varcolor_arr=["#00FF21","#FFAA00","#00AABB","#FF4400"];//颜色vartext_arr=["第一季度","第二季度","第三季度","第四季度"];//文字//绘制饼图drawCircle("canvas_circle",data_arr,color_arr,text_arr);

“Html5中如何绘制数据统计图”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！