Html5饼图如何绘制实现统计图

tangjin

作者

小编给大家分享一下Html5饼图如何绘制实现统计图，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

这个图是动态生成的，根据传入的比例参数（数组），来动态绘制饼图。饼图的大小也是根据<canvas>高度来动态调整的。

全部代码如下：

<!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"style="border:2pxsolid#0026ff;">
浏览器不支持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饼图如何绘制实现统计图”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！

阅读全文

发布于 2021-03-21 22:36:34

html5