html js 扇形统计图_Html5饼图绘制实现统计图的方法

这篇文章我们来讲一下在网站建设中，Html5饼图绘制实现统计图的方法。本文对大家进行网站开发设计工作或者学习都有一定帮助，下面让我们进入正文。

Html5提供了强大的绘图API，让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用HTML5绘制饼图(统计图)的方法。先看一下饼图效果：

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

全部代码如下：

Canvas测试

//绘制饼图

function drawCircle(canvasId, data_arr, color_arr, text_arr)

{

var c = document.getElementById(canvasId);

var ctx = c.getContext("2d");

var radius = c.height / 2 - 20; //半径

var ox = radius + 20, oy = radius + 20; //圆心

var width = 30, height = 10; //图例宽和高

var posX = ox * 2 + 20, posY = 30; //

var textX = posX + width + 5, textY = posY + 10;

var startAngle = 0; //起始弧度

var endAngle = 0; //结束弧度

for (var i