canvas画饼状图

   首先代码并不是原创。
   然后，准备弄一个根据数据库创建图表的框架，所以自己现在网上学了一点，先做个饼状图来看看：
   <script type="text/javascript" language="javascript">
//设置几个全局变量 计数，概率名数组，概率大小数组，还有分类颜色数组
var DataNum = 0;
var data_arr = new Array();//
        var text_arr = new Array();
        var color_arr = new Array();
        var color_arr = ["#00FF21", "#FFAA00", "#00AABB", "#FF4400","#FF0000"];//颜色可以多弄几个但是我懒得弄
       
function run(){  //执行画图方法
drawCircle("canvas_circle");
}
function drawCircle(canvasId){ //画饼状图的方法
data_arr = new Array();
text_arr = new Array();//每次执行都要初始化数据
if(DataNum == 0){
alert("无数据");
return;
}
else{
var j=parseFloat(0);
for(var i = 0; i < DataNum; i++){    //动态添加
data_arr[i] = document.getElementById("data_arr"+i).value;  //数据
text_arr[i] = document.getElementById("text_arr"+i).value;  //数据名称
j=parseFloat(j)+parseFloat(data_arr[i]); //相加的时候强制转换成浮点型，否知直接字符相加
}
if(j!=1){alert("输入比例不为1,请输入正确的比例");return;}
}

var c = document.getElementById(canvasId); //获取canvas对象
var ctx = c.getContext("2d");
alert("ss");
ctx.clearRect(0,0,500,500);
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 = 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 = 'bold 12px 微软雅黑';    //斜体 30像素 微软雅黑字体 
                    ctx.fillStyle = color_arr[i]; //"#000000"; 
                    var percent = text_arr[i] + "：" + 100 * data_arr[i] + "%"; 
                    ctx.fillText(percent, textX, textY + 20 * i); 
                }
               
            } 
            function add(){ //添加数据
            var new1 = dataInput.insertRow();
            var new11 = new1.insertCell();
var new12 = new1.insertCell();
new11.innerHTML ="数据名：<input type='text' size='10'id='text_arr"+DataNum+"'/>";
new12.innerHTML ="百分比：<input type='text' size='10'id='data_arr"+DataNum+"'/>";
            DataNum++;
            }
 
            //页面加载时执行init()函数 
           // window.onload = init; 
</script>
        就这些，先记着，也许以后有用。
       下面是HTML5代码
       <canvas id="canvas_circle" width="500" height="300"> 
            浏览器不支持canvas 
        </canvas>