javascript能否做立体饼图？谢谢！

如何做？ nnjieguo(專注.net）给点提示！

难！！！我曾经想用VML做过，但真很麻烦，主要的大饼的图层次序的问题

立体的也可以作，用vml，这是我以前从晚上参考的一个例子
<HTML xmlns:v>
<HEAD>
<META http-equiv="Content-Type" content="text/html; Charset=gb2312">
<META name="GENERATOR" content="网络程序员伴侣-Lshdic 2002">
<TITLE>蓝丽民意调查</TITLE>
<STYLE>
td{font-size:12px}
body{font-size:12px}
v\:*{behavior:url(#default#VML);} //这里声明了v作为VML公用变量
</STYLE>
</HEAD>
<body bgcolor=eeeeee style='border:0 solid eeeeee'><center>共有<font color=red>69</font>人参与过投票<br>
<script language="javascript">
  var arrcaption=new Array(  '增加新的栏目版块',   '完善娱乐视听',   '完善技术文章',   '完善下载中心',   '完善在线工具',   '完善程式交流论坛'   );
  var array1=new Array(16,14,10,16,5,8) ;
  var allstr=0.0;  for(var i=0;i<array1.length;i++){    allstr=array1[i] + allstr;  }
  for(i=0;i<array1.length;i++){
    mathstr=Math.round(100/(allstr/array1[i])) //求百分之几, 100/(总和/单个)
    document.write ("<v:rect fillcolor='lime' style='width:20;color:navy;height:"+5000/(1000/mathstr)+"'><br> %"+mathstr+"<br>"+array1[i]+"人<v:Extrusion backdepth='15pt' on='true'/></v:rect>")
  }
</script>
<p>
<table width=190>
<script language="javascript">
for(var i=0;i<array1.length;i++){   document.writeln('<Tr><Td>'+arrcaption[i]+'</td><Td>'+array1[i]+'</td></tr><tr><td>'); }
</script>
</table><p>
<a href='javascript:self.close()' style='text-Decoration:none;'>〖关闭窗口〗</a><p>
<A href='http://www.lshdic.com' target='_blank'>http://www.lshdic.com</a> Work by 02/12/01
</BODY>
</HTML>

偶这个难看了一点===============================================
<%
'================================================
' 功能：测试ASP生成饼图
' 作者：圪圪
' 日期：2004年11月07日 23:32:32
'================================================
Option Explicit
%>
<?xml version="1.0" encoding="gb2312" standalone="no" ?>
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" type="text/css" href="/style/default.css" />
<style type="text/css">

</style>
<script language="JavaScript" src="/Script/Default.js"></script>
<script language="JavaScript">

</script>
<title></title>
</head>
<body>
<%
'定义生成PIE函数
'Pie 圆心(x,y)，半径，开始角度，结束角度，边框色，是否填充，填充色，是否阴影，阴影色，X偏移，Y偏移，TITLE
Public Sub Pie(ByVal ox,ByVal oy,ByVal r,ByVal ars,ByVal are,ByVal bc, _
   ByVal fl,ByVal fc,ByVal sd,ByVal sdc,ByVal sdx,ByVal sdy,ByVal title)
Dim x1,x2,y1,y2
Dim rads,rade,rtmp,pos
if (ars=are)/2>180 Then
Pos="U"
Else
Pos="D"
End If
ars=360-ars
are=360-are
if ars<are Then
rTmp=are
are=ars
ars=rTmp
End If
rads=CDbl(ars)/180.0 * 3.1416
rade=CDbl(are)/180.0 * 3.1416
x1=CInt(r*cos(rads))
y1=CInt(r*sin(rads))
x2=CInt(r*cos(rade))
y2=CInt(r*sin(rade))
Response.Write "<v:shape coordorig=""-" & r & ",-" & r & """ coordsize=""" & CStr(r+r) & "," & CStr(r+r+r) & _
""" title=""" & title & """ style=""position;absolute;width:" & CStr(r+r) & "px;" & _
   "height:" & CStr(r+r) & "px;left:" & CInt(ox) & "px;top:" & CInt(oy) & "px;cursor:hand;"""
If Pos="U" Then
Response.Write "onmouseover=""JavaScript:this.style.left=parseInt(this.style.left)-3;this.style.top=parseInt(this.style.top)+3;""" & _
   "onmouseout=""JavaScript:this.style.left=parseInt(this.style.left)+3;this.style.top=parseInt(this.style.top)-3;"""
Else
Response.Write "onmouseover=""JavaScript:this.style.left=parseInt(this.style.left)+3;this.style.top=parseInt(this.style.top)-3;""" & _
   "onmouseout=""JavaScript:this.style.left=parseInt(this.style.left)-3;this.style.top=parseInt(this.style.top)+3;"""
End If
Response.Write "onclick=""JavaScript:alert(this.title);""" & _
   " strokecolor=""" & bc & """ strokeweight=""1px"">" & vbCrLf
Response.Write "<v:path v=""m 0,0 l " & x1 & "," & y1 & " ar " & CStr(-r) & "," & CStr(-r) & _
   "," & r & "," & r & "," & x1 & "," & y1 & "," & x2 & "," & y2 & _
   " l 0,0 x e"" />" & vbCrLf
If fl Then
Response.Write "<v:fill color=""" & fc & """ />" & vbCrLf
End If
If sd Then
Response.Write "<v:shadow on=""T"" type=""single"" color=""" & sdc & """ offset=""" & sdx & "px," & sdy & "px"" />" & vbCrLf
End If
Response.Write "</v:shape>" & vbCrLf
End Sub
%>
<v:group id="group1" CoordSize="550,450" style="position:relative;left:0px;top:0px;width:550px;height:450px;">
<v:shape style="position:absolute;left:0px;top:0px;width:550px;height:450px;border:solid 1px red;" />
<%
Dim DataArray,AngleArray,ColorArray,iCnt,CurAng,NxtAng,SumAll
'初始化数据－－替换成你从数据库里面取出来的数据
DataArray=Array(125,56,87,56,35,98)
AngleArray=Array()
'这个如何自动分配不相似的颜色？
ColorArray=Array("#0000FF","#00FF00","#FF0000","#FFFF00","#FF00FF","#00FFFF")
SumAll=0
ReDim AngleArray(UBound(DataArray))
For iCnt=LBound(DataArray) To UBound(DataArray)
SumAll =SumAll + DataArray(iCnt)
Next
For iCnt=LBound(DataArray) To UBound(DataArray)
AngleArray(iCnt)=CInt(DataArray(iCnt)/SumAll*360)
Next
CurAng=0
NxtAng=0
For iCnt=LBound(DataArray) To UBound(DataArray)
NxtAng=NxtAng+AngleArray(iCnt)
Pie 200,200,150,CurAng,NxtAng,ColorArray(iCnt),true,ColorArray(iCnt),true,"gray",1,5,"测试一下" & iCnt
CurAng=CurAng+AngleArray(iCnt)
Next
%>
</v:group>
</body>
</html>

把60行～66行改一下…………
这样效果好看多了 If Pos="U" Then
Response.Write "onmouseover=""JavaScript:this.style.zIndex=9;this.style.left=parseInt(this.style.left)-3;this.style.top=parseInt(this.style.top)+3;""" & _
"onmouseout=""JavaScript:this.style.zIndex=0;this.style.left=parseInt(this.style.left)+3;this.style.top=parseInt(this.style.top)-3;"""
Else
Response.Write "onmouseover=""JavaScript:this.style.zIndex=9;this.style.left=parseInt(this.style.left)+3;this.style.top=parseInt(this.style.top)-3;""" & _
"onmouseout=""JavaScript:this.style.zIndex=0;this.style.left=parseInt(this.style.left)-3;this.style.top=parseInt(this.style.top)+3;"""
End If

自己改一下就好了
把Response.Write 改成字符串连接

偶自己是懒得改了
因为偶的数据都是从数据库读出来的
直接用ASP生成就得了，干嘛还要把数据传到客户端再用JS来生成？

是不是这个东东啊:
http://community.csdn.net/Expert/topic/3478/3478613.xml?temp=5.569094E-02

看我这个
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:v><HEAD><TITLE>饼图</TITLE>
<META http-equiv=Content-Type content=text/html;charset=gb2312>
<META http-equiv=pragma content=no-cache>
<META http-equiv=Cache-Control content="no-cache, must-revalidate">
<STYLE>v\:* {
BEHAVIOR: url(#default#VML)
}
</STYLE><SCRIPT language=javascript>
  function init(){
    var ssarr=new Array(200,100,200,80,100,50);
    var cxx=250,cyy=150,ww=200,hh=150;
    drawPie(cxx,cyy,ww,hh,ssarr);
  }
  function drawPie(cx,cy,w,h,sarr){
    var total=0;
    for(var i=0;i<sarr.length;i++){ total+=sarr[i]; }
    for(var i=0;i<sarr.length;i++){ sarr[i]=sarr[i]/total; }
    var colorsh=new Array('#ff0000','#0033FF','#aa4400','#33ffff','#FF00FF');
    var startang=0;
    for(var i=0;i<sarr.length;i++){
      var thisang=Math.round(23592960*sarr[i]);
      var colorindex=i % colorsh.length;
      if((colorindex==0) && (i==(sarr.length-1))) colorindex++;
      var thiscolor=colorsh[colorindex];
      var startpoint=new Array(Math.round(w/2.0*Math.cos(startang/65536*Math.PI/180.0)),Math.round(h/2.0*Math.sin(startang/65536*Math.PI/180.0)));
      var mapone=document.createElement("<v:shape path=\"m "+cx+" "+cy+"  al  "+cx+" "+cy+" "+w+" "+h+" "+startang+" "+thisang+" l "+cx+" "+cy+"  e\" style=\"position:relative;rotation:0;WIDTH:400;HEIGHT:300;\"  coordsize = \"400,300\" fillcolor=\""+thiscolor+"\" strokecolor=\""+thiscolor+"\" strokeweight=\"1pt\"></v:shape>");
      mapone.innerHTML="<v:extrusion on=\"t\" foredepth=\"0pt\" backdepth=\"20pt\" color=\""+thiscolor+"\" rotationangle=\"0,0\">";
      group1.appendChild(mapone);
      startang+=thisang;
    }
  }
</SCRIPT><META content="MSHTML 6.00.2800.1476" name=GENERATOR></HEAD>
<BODY onload=init();><v:group id=group1
style="WIDTH: 400px; POSITION: absolute; HEIGHT: 300px; rotation: 15" coordsize
= "400,300"></v:group></BODY></HTML>

调试易

javascript能否做立体饼图？谢谢！

解决方案 »