站长论坛

标题: 一个JS圆饼例子 [打印本页]

作者: superadmin 时间: 2007-10-5 22:01
标题: 一个JS圆饼例子

<html xmlns:v>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>

<script>
PieNum = [25,25,30] //圆饼数据
PieColor = ['#ADFF2F','#87CEFA','#FF69B4']  //对应的颜色
PieTitle = ['男性','女性','异形']  //对应的描述

var PieData = []
for(var i=iTotal=0;i<PieNum.length;i++)iTotal += PieNum
for(var i=0;i<PieNum.length;i++)PieData=PieNum/iTotal

var oTop = 10;
var oLeft = 300;
var oWidth = 200;
var oHeight = 200;
var oAngle = 30 //degree

function window.onload(){
oWidth /= 2;
oHeight /= 2;
var endAngle = 0;
var startAngle = oAngle*65536;
var iHtml="<span style='position:absolute;left:"+oLeft+";top:"+oTop+";width:"+oWidth+";height:"+oHeight+"'>";
for(var i=0;i<PieData.length;i++)
      iHtml += "<v:shape path='m 1000,1000 ae 1000 1000 1000 1000 "+(startAngle+=endAngle)+" "+(endAngle=parseInt(PieData*65536*360))+" x e ns' fillcolor="+PieColor+" title='"+PieTitle+" : "+Math.round(PieData*10000)/100+"%' style='position:absolute;width:"+oWidth+";height:"+oHeight+";'/>" //  ?*360/100    path的ae的角度要*65536。
document.body.innerHTML += iHtml+"</span>";
}
</script>

欢迎光临站长论坛 (http://tzlink.com/bbs/) Powered by Discuz! X3.2