canvas画饼状图
首先代码并不是原创。
然后，准备弄一个根据数据库创建图表的框架，所以自己现在网上学了一点，先做个饼状图来看看：
<scripttype="text/javascript"language="javascript">
//设置几个全局变量计数，概率名数组，概率大小数组，还有分类颜色数组
varDataNum=0;
vardata_arr=newArray();//
vartext_arr=newArray();
varcolor_arr=newArray();
varcolor_arr=["#00FF21","#FFAA00","#00AABB","#FF4400","#FF0000"];//颜色可以多弄几个但是我懒得弄
functionrun(){//执行画图方法
drawCircle("canvas_circle");
}
functiondrawCircle(canvasId){//画饼状图的方法
data_arr=newArray();
text_arr=newArray();//每次执行都要初始化数据
if(DataNum==0){
alert("无数据");
return;
}
else{
varj=parseFloat(0);
for(vari=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;}
}
varc=document.getElementById(canvasId);//获取canvas对象
varctx=c.getContext("2d");
alert("ss");
ctx.clearRect(0,0,500,500);
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);
}
}
functionadd(){//添加数据
varnew1=dataInput.insertRow();
varnew11=new1.insertCell();
varnew12=new1.insertCell();
new11.innerHTML="数据名：<inputtype='text'size='10'id='text_arr"+DataNum+"'/>";
new12.innerHTML="百分比：<inputtype='text'size='10'id='data_arr"+DataNum+"'/>";
DataNum++;
}
//页面加载时执行init()函数
//window.onload=init;
</script>
就这些，先记着，也许以后有用。
下面是HTML5代码
<canvasid="canvas_circle"width="500"height="300">
浏览器不支持canvas
</canvas>