请问用js或asp如何实现饼图？？能否用js在客户端独立实现？？

<SCRIPT LANGUAGE=javascript> 
var jsArray=new Array(new Array(),new Array());
jsArray[0][0]='超市1';
jsArray[1][0]='1600';
jsArray[0][1]='超市2';
jsArray[1][1]='9300';
jsArray[0][2]='超市3';
jsArray[1][2]='4700';
jsArray[0][3]='超市4';
jsArray[1][3]='9800';
jsArray[0][4]='超市5';
jsArray[1][4]='2000';
jsArray[0][5]='超市6';
jsArray[1][5]='13400';
jsArray[0][6]='超市7';
jsArray[1][6]='54875';
jsArray[0][7]='超市8';
jsArray[1][7]='3500';
jsArray[0][8]='超市9';
jsArray[1][8]='5600';
jsArray[0][9]='超市10';
jsArray[1][9]='15440';
jsArray[0][10]='超市11';
jsArray[1][10]='3000';
jsArray[0][11]='超市12';
jsArray[1][11]='4200';
jsArray[0][12]='超市13';
jsArray[1][12]='2500';
jsArray[0][13]='超市14';
jsArray[1][13]='13040';
</SCRIPT><html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<html>
<head>
<title>监督点统计数据柱状图</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link rel="stylesheet" href="/Pub/Css/style.css" type="text/css">
<SCRIPT language=JavaScript>
function deal1(name,value,percent){ 
divDes.style.display="";
divDes.style.left=window.event.x+15;
divDes.style.top=window.event.y;
var strTemp="<table cellspacing='1' cellpadding='5' width='100%' height='100%' border='0' bgColor='#cecfce'><tr bgColor='#ffffE1'><td>"+name+"</td></tr><tr bgColor='#ffffE1'><td>数据："+ value +"</td></tr><tr bgColor='#ffffE1'><td>所占比例："+ percent +"%</td></tr></table>";
divDes.innerHTML=name+"\n数据："+ value +"\n所占比例:"+ percent+"%";
divDes.innerHTML=strTemp;
}
function deal2()
{
divDes.style.display="none";
}
function VMLPie(pContainer,pWidth,pHeight,pCaption){
this.Container=pContainer;
this.Width= pWidth || 300;
this.Height=pHeight || 203;
this.Caption = pCaption || "关键数据图表";
this.backgroundColor="";
this.Shadow=false;
this.BorderWidth=0;
this.BorderColor=null;
this.all=new Array();
this.RandColor=function(){
return "rgb("+ parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255)+")";
}
this.VMLObject=null;
}
VMLPie.prototype.Draw=function(numTableRows,numTableCols){
//画外框
var o=document.createElement("v:group");
o.style.width="100%";
o.style.height="90%"; o.coordsize="21600,21600";
o.style.position="relative"; this.VMLObject=o;
this.Container.appendChild(o);
//开始画内部园
var oOval=document.createElement("v:oval");
oOval.id="oOval";
oOval.style.width="55%";
oOval.style.height="90%";
oOval.style.top="5%";
oOval.style.left="2%";
oOval.fillcolor="#d5dbfb"; o.appendChild(oOval);
this.CreatePie(o,numTableRows,numTableCols);}
VMLPie.prototype.CreatePie=function(vGroup,numTableRows,numTableCols){
var div1=document.createElement("div");
div1.style.width="40%";
div1.style.display="none";
div1.style.position="relative";
div1.style.zIndex=10000;
div1.id="divDes"
vGroup.appendChild(div1);
var mX=Math.pow(2,16) * 360;
//这个参数是划图形的关键 
//AE x y width height startangle endangle
//x y表示圆心位置
//width height形状的大小
//startangle endangle的计算方法如下
// 2^16 * 度数  var vTotal=0;
var startAngle=0;
var endAngle=0;
var proportionValue=0;
var pieAngle=0;
var prePieAngle=0;

var objRow=null;
var objCell=null;

for(i=0;i<this.all.length;i++){
vTotal+=Math.abs(this.all[i].Value);
} var objLegendRect=document.createElement("v:rect"); //创建一个矩形元素
var objLegendTable=document.createElement("table"); //创建一个table元素
objLegendTable.cellPadding=5;
objLegendTable.cellSpacing=10;
objLegendTable.border=0; objLegendTable.width="100%";
objLegendTable.height="100%";
with(objLegendRect){
style.left="60%"; //右边表格距左多少
style.top="30%"; //右边表格距上多少
style.width="38%"; //表格宽度
style.height="40%"; //表格高度
fillcolor="#e6e6e6";
strokeweight="1px";   
} var vTextbox=document.createElement("v:textbox");
vTextbox.appendChild(objLegendTable);
objLegendRect.appendChild(objLegendTable);

var vShadow=document.createElement("v:shadow");
vShadow.on="t";
vShadow.type="single";
vShadow.color="graytext";
vShadow.offset="2px,2px";
objLegendRect.appendChild(vShadow); vGroup.appendChild(objLegendRect);  

解决方案 »

  1.   

    用VML可以实现 <!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>
      

  2.   

    接上：
    var strAngle="";
    for(i=0;i<this.all.length;i++){ //顺序的画出各个饼图 var vPieEl=document.createElement("v:shape");
    var vPieId=document.uniqueID;
    vPieEl.id="pie" + i.toString();
    vPieEl.style.width="55%";
    vPieEl.style.height="90%";
    vPieEl.style.top="5%";
    vPieEl.style.left="2%";
    vPieEl.style.position="relative";
    vPieEl.coordsize="1500,1400";
    vPieEl.strokecolor="white";   
    vPieEl.id=vPieId;
    pieAngle= Math.abs(this.all[i].Value) / vTotal;
    startAngle+=prePieAngle;
    prePieAngle=pieAngle;
    endAngle=pieAngle;  strAngle+=this.all[i].Name +":" +Math.abs(this.all[i].Value)+ " Start:"+startAngle +"  End:"+ endAngle +"\n";
    vPieEl.path="M 750 700 AE 750 700 750 700 " + parseInt(mX * startAngle) +" " + parseInt(mX * endAngle) +" xe";
    if ((parseFloat(endAngle * 100)).toString().indexOf(".") != -1) {
    proportionValue = (parseFloat(endAngle * 100)).toString().split(".")[0] + "." + (parseFloat(endAngle * 100)).toString().split(".")[1].substr(0,2);
    }
    else {
    proportionValue = parseFloat(endAngle * 100);
    } var name1=this.all[i].Name;
    var value1=this.all[i].Value;
    vPieEl.attachEvent('onmouseover',new Function("deal1('"+name1+"','"+value1+"','"+proportionValue+"')"));
    vPieEl.attachEvent('onmouseout',deal2);
    vPieEl.innerHTML='<v:fill  rotate="t" angle="-135" focus="100%" />';
    var objFill=document.createElement("v:fill");
    objFill.rotate="t";
    objFill.focus="100%";
    //objFill.type="gradient";
    objFill.angle=parseInt( 360 * (startAngle + endAngle /2));
    vPieEl.appendChild(objFill);
     
    var vColor=this.RandColor();
    vPieEl.fillcolor=vColor; //设置颜色
    //开始画图例－－－－ 右边的信息列表
    if (parseInt(i / (numTableRows - 1)) != 0) {
    var objColor=objLegendTable.rows(i%(numTableRows - 1)).insertCell();//颜色标记
    objColor.style.backgroundColor=vColor;
    objColor.style.width="16px";
    objColor.noWrap=true;

    objColor.PieElement=vPieId;

    var objCell=objLegendTable.rows(i%(numTableRows - 1)).insertCell();//颜色标记
    objCell.style.font="icon";
    objCell.style.padding="0px";
    objCell.noWrap=true;
    objCell.innerText=this.all[i].Name +":"+ proportionValue + "%";
    }
    else {
    objRow=objLegendTable.insertRow();
    objRow.style.height="6px";

    var objColor=objRow.insertCell();//颜色标记
    objColor.style.backgroundColor=vColor;
    objColor.style.width="16px";
    objColor.noWrap=true;

    objColor.PieElement=vPieId;

    objCell=objRow.insertCell();
    objCell.style.font="icon";
    objCell.style.padding="0px";
    objCell.noWrap=true;
    objCell.innerText=this.all[i].Name +":"+ proportionValue + "%";
    }
    vGroup.appendChild(vPieEl);
    }
    }VMLPie.prototype.Refresh=function(){}
    //改变group容器的比例大小
    VMLPie.prototype.Zoom=function (iValue){
    var vX=21600;
    var vY=21600;
    this.VMLObject.coordsize=parseInt(vX / iValue) +","+parseInt(vY /iValue);
    }
    //根据表格每行数据生成数据对象
    VMLPie.prototype.AddData=function(sName,sValue,sTooltipText){
    var oData=new Object();
    oData.Name=sName;
    oData.Value=sValue;
    oData.TooltipText=sTooltipText;
    var iCount=this.all.length;
    this.all[iCount]=oData;
    }
    //清空函数包含数据
    VMLPie.prototype.Clear=function(){
    this.all.length=0;
    }function LegendMouseOverEvent(){
    var eSrc=window.event.srcElement;
    eSrc.style.border="1px solid black";
    }function LegendMouseOutEvent(){
    var eSrc=window.event.srcElement;
    eSrc.style.border="";
    }var objPie=null;
    //以下是函数调用
    /*参数说明：
    strTableId -- 源数据表格Id
    intStartRow -- 有效数据开始行数
    intNameCols -- 数据名称列
    intValueCols -- 数值列
    */
    function DrawPie(dataArray,imgSpace,pCaption){
    imgSpace=document.getElementById(imgSpace);
    objPie=new VMLPie(imgSpace,"","",pCaption);
    objPie.BorderWidth=1;
    objPie.BorderColor="blue";
    objPie.backgroundColor="#ffffff";
    //objPie.Shadow=true;
    //###############右边的说明表格处理，决定分成几行几列###########################
    var strBodyInnerHTML ="\
    <v:shape alt='' style='position:relative;valign:top;left:0px;top:0px;width:100%;height:10%;z-index:1'>\
      <table cellspacing='0' cellpadding='0' width='100%' height='100%' border='0'>\
        <tr><td align='center'><font color='black' style='font-size:13px;' face='Arial Black'>"+objPie.Caption+"</font></td>\
        </tr>\
      </table>\
    </v:shape>";
    imgSpace.innerHTML = strBodyInnerHTML;
    for (var i=0;i<dataArray[0].length ;i++ )
    {
    objPie.AddData(dataArray[0][i],dataArray[1][i],"");
    }
    if ( i > 8) { //如果源数据表格有效数据行大于8行，做换行处理
    numTableCols = 2;
    numTableRows = 2 + parseInt((i - 1) / 2);
    }
    else {
    numTableCols = 1;
    numTableRows = 9;
    }
    objPie.Draw(numTableRows,numTableCols); //调用画图方法
    }
    </script>
    </head>
    <STYLE>
    v\:* { BEHAVIOR: url(#default#VML) }
    </STYLE>
    <Script language="Javascript">
    function myprint(){
    //printbutton.style.visibility="hidden";
    print();
    }
    function myclose(){
    //printbutton.style.visibility="hidden";
    window.close();
    }
    </Script>
    <body onload="DrawPie(jsArray,'imgTd','2002-10-01 至 2004-10-01 期间关键数据图表');">
    <br><br>
    <center>
    <table width="90%" height="90%" border=0 style="border-width:1px; border-style:solid; border-color:black ">
    <tr><td id="imgTd">
    </td></tr>
    </table>
    </center>
    <div id=printbutton><p align=center><input type=button name=printb value="打印" onclick="myprint()"> <input type=button name=printa value="关闭" onclick="myclose()"></p></div></body>
    </html>