收集了一些表现层应用的例子

页面加载效果一：

&lt;script type="text/javascript"&gt;// &lt;![CDATA[

/********************************************************
 * ProgressBar class
 * @author null
 * @param width - width of progress bar
 * @param height - height of progress bar
 * @param fgColor - fgColor of progress bar
 * @param bgColor - bgColor of progress bar
 * @param borderColor - borderColor of progress bar
          the rule is the same border-color of CSS
/********************************************************/
function ProgressBar(width,height,fgColor,bgColor,borderColor){

  if(borderColor==undefined){
    bgColor = "threedlightshadow";
    fgColor = "highlight";
    borderColor =  "buttonshadow window window buttonshadow";
  }
  else if(borderColor==undefined&amp;&amp;fgColor==undefined&amp;&amp;bgColor==undefined){
    bgColor = "threedlightshadow";
    fgColor = "highlight";
    borderColor =  "buttonshadow window window buttonshadow";
  }

  percent  = 0.0; //initialize to zero
  fontSize = Math.ceil(height/2)+1;

  font_bt = "&lt;table width=100% height=100% cellpadding=0 cellspacing=0 style='font:bold "+fontSize+"px Arial;color:"+bgColor+";text-align:center;vertical-align:center;'&gt;
&lt;tr&gt;
&lt;td&gt;"+parseInt(percent*100)+" %&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;";
  font_ft = "
&lt;table width=100% height=100% cellpadding=0 cellspacing=0 style='font:bold "+fontSize+"px Arial;color:"+fgColor+";text-align:center;vertical-align:center;'&gt;
&lt;tr&gt;
&lt;td&gt;"+parseInt(percent*100)+" %&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;";

  squares = "";
  for(var i=0;;i++){
    var left = width-2-i*(height/2+1);
    //alert(left);
    if(left&gt;=height/2+1){
      squares += "&lt;span style='background-color:"+fgColor+";width:"+height/2+"px;height:"+(height-2)+";margin-right:1px;'&gt;&lt;/span&gt;";
    }
    else if(left&gt;=1){
      squares += "&lt;span style='background-color:"+fgColor+";width:"+left+"px;height:"+(height-2)+";margin:0px;'&gt;&lt;/span&gt;";
    }
    else
      break;
  }

  //position:absolute;
  str  = "&lt;span id=progress_bg style='width:"+width+"px;height:"+height+"px;background-color:"+bgColor+";border:1px solid;border-color:"+borderColor+"'&gt;"; //"+fgColor+" #transparent
  str += "  &lt;span id=progress_fg style='position:absolute;width:100%;height:100%;clip:rect(0,"+parseInt(percent*100)+"%,100%,0);background-color:"+fgColor+";font-size:0px;line-height:0px;'&gt;";
  str +=      squares;
  str += "  &lt;/span&gt;";
  str += "  &lt;span id=progress_bt style='position:absolute;z-index:8;width:100%;height:100%;background-color:#transparent;clip:rect(0,"+parseInt(percent*100)+"%,100%,0);text-align:center;'&gt;";
  str +=      font_bt;
  str += "  &lt;/span&gt;";
  str += "  &lt;span id=progress_ft style='position:absolute;z-index:9;width:100%;height:100%;background-color:#transparent;clip:rect(0,100%,100%,"+parseInt(percent*100)+"%);text-align:center;'&gt;";
  str +=      font_ft;
  str += "  &lt;/span&gt;";
  str += "&lt;/span&gt;";

  document.write(str);

  function update(){
    font_bt = "
&lt;table width=100% height=100% cellpadding=0 cellspacing=0 style='font:bold "+fontSize+"px Arial;color:"+bgColor+";text-align:center;vertical-align:center;'&gt;
&lt;tr&gt;
&lt;td&gt;"+parseInt(percent*100)+" %&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;";

    font_ft = "
&lt;table width=100% height=100% cellpadding=0 cellspacing=0 style='font:bold "+fontSize+"px Arial;color:"+fgColor+";text-align:center;vertical-align:center;'&gt;
&lt;tr&gt;
&lt;td&gt;"+parseInt(percent*100)+" %&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;";

    document.getElementById("progress_fg").style.clip='rect(0,'+parseInt(percent*100)+'%,100%,0)';
    document.getElementById("progress_bt").style.clip='rect(0,'+parseInt(percent*100)+'%,100%,0)';
    document.getElementById("progress_ft").style.clip='rect(0,100%,100%,'+parseInt(percent*100)+'%)';

    document.getElementById("progress_bt").innerHTML=font_bt;
    document.getElementById("progress_ft").innerHTML=font_ft;
  }

  this.setModel=function(model){
    percent = model;
    update();
  }
}

/////////// Test for ProgressBar ////////////
pb = new ProgressBar(153,18);//,"navy","#FFE4C4","#ff9900");
//document.write("Hello,ProgressBar");
//pb.setModel(50/100);
function progress(v){
  if (v &gt;= 100){
    pb.setModel(1.00);
    alert("Finished");
  }
  else{
    pb.setModel(v/100);
    window.setTimeout("progress("+(v+1)+")",Math.random()*Math.random()*500);
  }
}
progress(0);
///////////////// End Test ///////////////////
// ]]&gt;&lt;/script&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

/********************************************************

* ProgressBar class

* @author null

* @param width - width of progress bar

* @param height - height of progress bar

* @param fgColor - fgColor of progress bar

* @param bgColor - bgColor of progress bar

* @param borderColor - borderColor of progress bar

the rule is the same border-color of CSS

/********************************************************/

function ProgressBar(width,height,fgColor,bgColor,borderColor){

if(borderColor==undefined){

bgColor = "threedlightshadow";

fgColor = "highlight";

borderColor = "buttonshadow window window buttonshadow";

}

else if(borderColor==undefined&&fgColor==undefined&&bgColor==undefined){

bgColor = "threedlightshadow";

fgColor = "highlight";

borderColor = "buttonshadow window window buttonshadow";

}

percent = 0.0; //initialize to zero

fontSize = Math.ceil(height/2)+1;

font_bt = "<table width=100% height=100% cellpadding=0 cellspacing=0 style='font:bold "+fontSize+"px Arial;color:"+bgColor+";text-align:center;vertical-align:center;'>

<tr>

<td>"+parseInt(percent*100)+" %</td>

</tr>

</table>";

font_ft = "

<tr>

<td>"+parseInt(percent*100)+" %</td>

</tr>

</table>";

squares = "";

for(var i=0;;i++){

var left = width-2-i*(height/2+1);

//alert(left);

if(left>=height/2+1){

squares += "<span style='background-color:"+fgColor+";width:"+height/2+"px;height:"+(height-2)+";margin-right:1px;'></span>";

}

else if(left>=1){

squares += "<span style='background-color:"+fgColor+";width:"+left+"px;height:"+(height-2)+";margin:0px;'></span>";

}

else

break;

}

//position:absolute;

str = "<span id=progress_bg style='width:"+width+"px;height:"+height+"px;background-color:"+bgColor+";border:1px solid;border-color:"+borderColor+"'>"; //"+fgColor+" #transparent

str += " <span id=progress_fg style='position:absolute;width:100%;height:100%;clip:rect(0,"+parseInt(percent*100)+"%,100%,0);background-color:"+fgColor+";font-size:0px;line-height:0px;'>";

str += squares;

str += " </span>";

str += " <span id=progress_bt style='position:absolute;z-index:8;width:100%;height:100%;background-color:#transparent;clip:rect(0,"+parseInt(percent*100)+"%,100%,0);text-align:center;'>";

str += font_bt;

str += " </span>";

str += " <span id=progress_ft style='position:absolute;z-index:9;width:100%;height:100%;background-color:#transparent;clip:rect(0,100%,100%,"+parseInt(percent*100)+"%);text-align:center;'>";

str += font_ft;

str += " </span>";

str += "</span>";

document.write(str);

function update(){

font_bt = "

<tr>

<td>"+parseInt(percent*100)+" %</td>

</tr>

</table>";

font_ft = "

<tr>

<td>"+parseInt(percent*100)+" %</td>

</tr>

</table>";

document.getElementById("progress_fg").style.clip='rect(0,'+parseInt(percent*100)+'%,100%,0)';

document.getElementById("progress_bt").style.clip='rect(0,'+parseInt(percent*100)+'%,100%,0)';

document.getElementById("progress_ft").style.clip='rect(0,100%,100%,'+parseInt(percent*100)+'%)';

document.getElementById("progress_bt").innerHTML=font_bt;

document.getElementById("progress_ft").innerHTML=font_ft;

}

this.setModel=function(model){

percent = model;

update();

}

/////////// Test for ProgressBar ////////////

pb = new ProgressBar(153,18);//,"navy","#FFE4C4","#ff9900");

//document.write("Hello,ProgressBar");

//pb.setModel(50/100);

function progress(v){

if (v >= 100){

pb.setModel(1.00);

alert("Finished");

}

else{

pb.setModel(v/100);

window.setTimeout("progress("+(v+1)+")",Math.random()*Math.random()*500);

}

progress(0);

///////////////// End Test ///////////////////

// ]]></script>

页面加载效果二

&amp;nbsp;

&amp;nbsp;

&amp;nbsp;

&amp;nbsp;

&amp;nbsp;

&amp;nbsp;
&lt;table width="&amp;quot;50%&amp;quot;" border="&amp;quot;0&amp;quot;" cellspacing="&amp;quot;0&amp;quot;" cellpadding="&amp;quot;0&amp;quot;" align="center"&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td nowrap="nowrap" width="&amp;quot;51%&amp;quot;"&gt;
&lt;p align="&amp;quot;right&amp;quot;"&gt;size=2&gt;正在加载：&lt;/p&gt;
&lt;/td&gt;
&lt;td width="&amp;quot;4%&amp;quot;"&gt;behavior="slide"&gt;███████████████████████████████████████████████████████████████████████████████&lt;/td&gt;
&lt;td align="left" width="&amp;quot;45%&amp;quot;"&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;script type="text/javascript"&gt;// &lt;![CDATA[

var myTime=0
function counter(){
myTime++
per.innerHTML="&lt;font size=2 color=darkblue&gt; "+myTime+"%&lt;/font&gt;"
if(myTime&lt;100)
setTimeout("counter()",40);
else{
location.href="&lt;a href="http://download.pchome.net" target="_blank"&gt;http://download.pchome.net&lt;/a&gt;"
}}

counter()

// ]]&gt;&lt;/script&gt;

&nbsp;

<tbody>

<tr>

</td>

<td width="&quot;4%&quot;">behavior="slide">███████████████████████████████████████████████████████████████████████████████</td>

</tr>

</tbody>

</table>

var myTime=0

function counter(){

myTime++

per.innerHTML="<font size=2 color=darkblue> "+myTime+"%</font>"

if(myTime<100)

setTimeout("counter()",40);

else{

location.href="<a href="http://download.pchome.net" target="_blank">http://download.pchome.net</a>"

}}

counter()

// ]]></script>

页面加载效果三

&amp;nbsp;
&lt;div id="&amp;quot;abc&amp;quot;"&gt;Loading.............&lt;/div&gt;
&lt;script type="text/javascript"&gt;// &lt;![CDATA[

s=new Array();
s[0]="#050626";
s[1]="#0a0b44";
s[2]="#0f1165";
s[3]="#1a1d95";
s[4]="#1c1fa7";
s[5]="#1c20c8";
s[6]="#060cff";
s[7]="#2963f8";
function ls(){
		pimg.innerHTML="";
		for(i=0;i&lt;9;i++){
		pimg.innerHTML+="
&lt;input style="width:15;height:10;border:0;background:"+s&lt;i&gt;+";margin:1"&gt;";
		}
	}

function rs(){
		pimg.innerHTML="";
		for(i=9;i&gt;-1;i--){
		pimg.innerHTML+="
&lt;input style="width:15;height:10;border:0;background:"+s&lt;i&gt;+";margin:1"&gt;";
		}
	}

ls();
var g=0;sped=0;
function str(){
	if(pimg.style.pixelLeft&lt;350&amp;&amp;g==0){
	if(sped==0){
		ls();
		sped=1;
		}
	pimg.style.pixelLeft+=4;
	setTimeout("str()",1);
	return;
	}
	g=1;
	if(pimg.style.pixelLeft&gt;-200&amp;&amp;g==1){
	if(sped==1){
		rs();
		sped=0;
		}
	pimg.style.pixelLeft-=4;
	setTimeout("str()",1);
	return;
	}
	g=0;
	str();
}

function flashs(){
if(abc.style.color=="#ffffff"){
	abc.style.color="#707888";
	setTimeout('flashs()',500);
	}
else{
	abc.style.color="#ffffff";
	setTimeout('flashs()',500);
	}
}
flashs();
str();
// ]]&gt;&lt;/script&gt;

&nbsp;

<div id="&quot;abc&quot;">Loading.............</div>

s=new Array();

s[0]="#050626";

s[1]="#0a0b44";

s[2]="#0f1165";

s[3]="#1a1d95";

s[4]="#1c1fa7";

s[5]="#1c20c8";

s[6]="#060cff";

s[7]="#2963f8";

function ls(){

pimg.innerHTML="";

for(i=0;i<9;i++){

pimg.innerHTML+="

<input style="width:15;height:10;border:0;background:"+s<i>+";margin:1">";

}

function rs(){

pimg.innerHTML="";

for(i=9;i>-1;i--){

pimg.innerHTML+="

<input style="width:15;height:10;border:0;background:"+s<i>+";margin:1">";

}

ls();

var g=0;sped=0;

function str(){

if(pimg.style.pixelLeft<350&&g==0){

if(sped==0){

ls();

sped=1;

}

pimg.style.pixelLeft+=4;

setTimeout("str()",1);

return;

}

g=1;

if(pimg.style.pixelLeft>-200&&g==1){

if(sped==1){

rs();

sped=0;

}

pimg.style.pixelLeft-=4;

setTimeout("str()",1);

return;

}

g=0;

str();

}

function flashs(){

if(abc.style.color=="#ffffff"){

abc.style.color="#707888";

setTimeout('flashs()',500);

}

else{

abc.style.color="#ffffff";

setTimeout('flashs()',500);

}

flashs();

str();

// ]]></script>

网页屏保：

&lt;script type="text/javascript" language="&amp;quot;JavaScript&amp;quot;"&gt;// &lt;![CDATA[

function  screensave(){
test.value++;
if(test.value==5){
test.style.display='none';
document.all[4].bgColor='black';
}
}
function  screenopen(){
test.value=0;
test.style.display='';
document.all[4].bgColor='';
}
// ]]&gt;&lt;/script&gt;
? 秒屏保
&lt;input id="&amp;quot;test&amp;quot;" type="text" /&gt;

function screensave(){

test.value++;

if(test.value==5){

test.style.display='none';

document.all[4].bgColor='black';

}

function screenopen(){

test.value=0;

test.style.display='';

document.all[4].bgColor='';

}

// ]]></script>

? 秒屏保

用vml做的画图类，可以完整绘制图表

&lt;script type="text/javascript"&gt;// &lt;![CDATA[

//---dashstyle:solid|dot|dash|dashdot|longdash|longdashdot|longdashdotdot
//---arrow:block|classic|diamond|oval|open|chevron|doublechevron
//---arrowwidth:narrow|medium|wide
//---arrowlength:short|medium|long
//---extrusion_property:skewangle|foredepth|backdepth|rotationangle|lightface|brightness
//---extrusion_render:solid|wireFrame|boundingcube
//---extrusion_type:perspective|parallel
//---extrusion_plan:xy|zx|yz
var vt1=new vt()
document.write("&lt;html xmlns:v&gt;
&lt;style&gt;v:*{behavior:url(#default#VML)}&lt;/style&gt;

")
function vt(){
    this.getEffect=function(css){
        var l="",s
        var fill=getVal(css,"fill"),sdw=getVal(css,"shadow"),ext=getVal(css,"ext")
        if(fill=="none")
            l+="&lt;v:fill opacity=0 /&gt;"
        if(fill=="ball")
            l+="&lt;v:fill method='any' opacity='"+getVal(css,"opacity",1)+"' focusposition='"+getVal(css,"fpos","25%,25%")+"' type='gradientradial' color2='"+getVal(css,"colors","white")+"' /&gt;"
        if(fill=="flat")
            l+="&lt;v:fill method='sigma' opacity='"+getVal(css,"opacity",1)+"' angle='"+getVal(css,"angle",0)+"' type='gradient' colors='"+getVal(css,"colors","white")+"' /&gt;"
        if(sdw=="t")
            l+="&lt;v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /&gt;"
        if(ext!="")
            l+="&lt;v:extrusion on='True' render='"+getVal(css,"render")+"' color='"+getVal(css,"extcolor","gray")+"' /&gt;"
        if(getVal(css,"bdcolor")=="none")
            l+="&lt;v:extrusion on=t backdepth=0 /&gt;"
        return l
    }
    this.line=function(x1,y1,x2,y2,css){
        var l
        l="&lt;v:line from="+x1+","+y1+" to="+x2+","+y2+" strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' style=position:absolute;top:0;left:0&gt;"
        l+="&lt;v:stroke dashstyle='"+getVal(css,"dashstyle")+"' startarrow=none endarrow='"+getVal(css,"arrow")+"' /&gt;"
        l+="&lt;/v:line&gt;"
        return l
    }
    this.curve=function(x1,y1,x2,y2,x3,y3,css){
        var l
        l="&lt;v:curve opacity='0' from="+x1+","+y1+" control1="+x2+","+y2+" to="+x3+","+y3+" strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' style=position:absolute;top:0;left:0&gt;"
        l+=this.getEffect(css)+"&lt;/v:curve&gt;"
        return l
    }
    this.rect=function(x,y,w,h,css){
        var l,type=getVal(css,"type")=="round" ? "roundrect" : "rect"
        l="&lt;v:"+type+" title='"+getVal(css,"title")+"' style="position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;height:"+h+"px" strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' fillcolor='"+getVal(css,"bgcolor","white")+"'&gt;"
        l+=this.getEffect(css)+"&lt;/v:"+type+"&gt;"
        return l
    }
    this.oval=function(x,y,w,h,css){
        var l
        l="&lt;v:oval title='"+getVal(css,"title")+"' style="position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;height:"+h+"px" strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' fillcolor='"+getVal(css,"bgcolor","white")+"'&gt;"
        l+=this.getEffect(css)+"&lt;/v:oval&gt;"
        return l
    }
    this.polyline=function(pList,css){
        var l
        l="&lt;v:polyline points='"+pList+"' title='"+getVal(css,"title")+"' style='position:absolute' strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' fillcolor='"+getVal(css,"bgcolor","white")+"'&gt;"
        l+=this.getEffect(css)+"&lt;/v:polyline&gt;"
        return l
    }
    this.pie=function(r,sa,ea,css){
        var sf,ef,sx,sy,ex,ey
        var title=getVal(css,"title"),x=parseInt(getVal(css,"x",0)),y=parseInt(getVal(css,"y",0))
        sf=Math.PI*(sa/180)
        ef=Math.PI*(ea/180)
        sy=parseInt(r*Math.sin(sf))
        sx=parseInt(r*Math.cos(sf))
        ey=parseInt(r*Math.sin(ef))
        ex=parseInt(r*Math.cos(ef))
        l=this.shape("m0,0l"+sx+","+sy+"ar-"+r+",-"+r+","+r+","+r+","+ex+","+ey+","+sx+","+sy+",l0,0xe",css)
        if(title!=""){
            if(ef==0)
                ef=270
            var cx=(r+10)*Math.cos((sf+ef)/2),cy=(r+10)*Math.sin((sf+ef)/2)
            l+=this.drawStr(title,cx+x-10,cy+y-5)
        }
        return l
    }
    this.shape=function(pList,css){
        var l
        l="&lt;v:shape path='"+pList+"' title='"+getVal(css,"title")+"' coordsize=1,1 style='position:absolute;width:1;height:1;left:"+getVal(css,"x","0")+";top:"+getVal(css,"y","0")+"' strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' fillcolor='"+getVal(css,"bgcolor","white")+"'&gt;"
        l+=this.getEffect(css)+"&lt;/v:shape&gt;"
        return l
    }
    this.drawStr=function(k,x,y,css){
        var l,vl
        if(k=="")
            return
        vl=getVal(css,"valign")!="" ? "width:5;word-break:break-all" : ""
        l="&lt;span style='position:absolute;z-index:"+getVal(css,"z-index")+";font:12;left:"+x+"px;top:"+y+"px;"+vl+"'&gt;"+k+"&lt;/span&gt;"
        if(vl=="")
            l="&lt;nobr&gt;"+l+"&lt;/nobr&gt;"
        return l
    }
    this.draw3DStr=function(k,x1,y1,x2,y2,css){
        var l,gd
        gd=getVal(css,"color2")
        if(gd!="")
            gd=" type=gradient color2="+gd
        l="&lt;v:line from="+x1+","+y1+" to="+x2+","+y2+"&gt;&lt;v:path textpathok='t' /&gt;&lt;v:textpath string='"+k+"' on=t fitpath=t /&gt;&lt;v:fill on=t color='"+getVal(css,"bgcolor")+"' "+gd+" /&gt;&lt;v:extrusion on=t foredepth="+getVal(css,"depth",20)+" /&gt;&lt;/v:line&gt;"
        return l
    }
    this.drawPic=function(type,x,y,css){
        var n,l=""
        if(type=="glassbt1"){
            n=getVal(css,"width",100)
            l+=this.oval(x,y,n,n,"shadow:"+parseInt(n/20)+"px,"+parseInt(n/14)+"px;fill:ball;fpos:50%,80%;bgcolor:"+getVal(css,"bgcolor","#003300")+";colors:"+getVal(css,"colors","#22ff22"))
            l+=this.oval(x+.125*n,y-.07*n,.75*n,parseInt(n/2),"fill:ball;fpos:50%,50%;bgcolor:white;bdcolor:none:f;colors:white;opacity:0")
        }
        return l
    }
}
function addChart(vt,vList,css){
    var a,cx=20,w,h0,h1,hsize,n,s,amt=0,max=0,sa,ea
    var ph=parseInt(getVal(css,"height",300)),pw=parseInt(getVal(css,"width",500))
    var type=getVal(css,"type","rect"),showVal=getVal(css,"showVal")
    var ac="green,yellow,red,blue,gray".split(",")
    var l=""
    if(ph&lt;150||pw&lt;150){
        alert("图表区域太小，中断输出！")
        return
    }
    a=vList.split(";")
    for(var i in a){
        a&lt;i&gt;=a&lt;i&gt;.split(",")
        for(var j in a&lt;i&gt;){
            if(i&gt;0&amp;&amp;j&gt;0)
                if(parseInt(a&lt;i&gt;[j])&gt;max)
                    max=parseInt(a&lt;i&gt;[j])
            if(j&gt;0)
                amt+=parseInt(a&lt;i&gt;[j])
        }
    }
    if(max==0)
        return
    hsize=(ph-100)/max
    if(type=="pie"){
        l+=vt.rect(0,0,pw,ph,"bgcolor:"+getVal(css,"bgcolor")+";shadow:t")
        l+=vt.drawStr("统计饼图",pw/2-40,10)
        sa=0
        for(i=0;i&lt;a.length;i++){
            ea=a&lt;i&gt;[1]*360/amt+sa
            if(i==a.length-1)
                ea=0
            l+=vt.rect(pw-130,i*30+60,20,20,"bgcolor:"+ac&lt;i&gt;)
            l+=vt.drawStr(a&lt;i&gt;[0],pw-100,i*30+65)
            l+=vt1.pie((ph-60)/2,sa,ea,"title:"+(parseInt((10000*a&lt;i&gt;[1]/amt))/100)+"%;x:"+(pw/2-(ph-60)/4)+";y:"+(ph/2+10)+";bgcolor:"+ac&lt;i&gt;)
            sa=ea
        }
        return l
    }
    n=(vList.length-vList.replace(/;/g,"").replace(/,/g,"").length)*20+20
    if(pw&lt;n)
        pw=n
    l+=vt.rect(0,0,pw,ph,"bgcolor:"+getVal(css,"bgcolor")+";shadow:t")
    l+=vt.line(30,ph-30,30,10,"arrow:classic")
    l+=vt.line(30,ph-30,pw-10,ph-30,"arrow:classic")
    l+=vt.drawStr(getVal(css,"xname"),pw-50,ph-20)
    l+=vt.drawStr(getVal(css,"yname"),10,10,"valign:true")
    l+=vt.drawStr(getVal(css,"title"),220,10)

    for(i=0;i&lt;5;i++){
        l+=vt.line(30,70+i*(ph-100)/5,pw-10,70+i*(ph-100)/5,"dashstyle:dash;bdcolor:#c0c0c0")
        l+=vt.drawStr(parseInt(max)*(5-i)/5,10,65+i*(ph-100)/5)
    }
    for(i in a){
        for(j in a&lt;i&gt;){
            if(i==0){
                l+=vt.rect(60+j*80,30,20,20,"bgColor:"+ac[j])
                l+=vt.drawStr(a&lt;i&gt;[j],85+j*80,35)
            }
            else{
                if(j==0){
                    l+=vt.drawStr(a&lt;i&gt;[j],cx,ph-25)
                }
                else{
                    h1=parseInt(a&lt;i&gt;[j]*hsize)
                    if(type=="rect"){
                        l+=vt.rect(cx,ph-30-h1,20,h1,"bgColor:"+ac[j-1]+";title:"+a&lt;i&gt;[j])
                        if(showVal=="true")
                            l+=vt.drawStr(a&lt;i&gt;[j],cx+3,ph-42-h1,"z-index:1")
                    }
                    w=20*a&lt;i&gt;.length
                    if(type=="line"){
                        if(i&gt;1){
                            h0=parseInt(a[i-1][j]*hsize)
                            l+=vt.line((i-1)*w-w+40,ph-h0-30,i*w-w+40,ph-h1-30,"bdcolor:"+ac[j-1])
                        }
                        l+=vt.rect(i*w-1-w+40,ph-31-h1,3,3,"bgcolor:"+ac[j-1]+";title:"+a&lt;i&gt;[j])
                        if(showVal=="true"){
                            l+=vt.drawStr(a&lt;i&gt;[j],i*w-w+40,ph-42-h1,"z-index:1")
                        }
                    }
                    cx+=20
                }
            }
        }
        cx+=20
    }
    return l
}

function getVal(vList,k,def){
    if(vList==null)
        vList=""
    vList=vList.replace(/ /g,"").replace(/=/g,":").toLowerCase()
    k=k.toLowerCase()
    var a=vList.split(";")
    for(var i in a){
        a&lt;i&gt;=a&lt;i&gt;.split(":")
        if(a&lt;i&gt;[0]==k&amp;&amp;a&lt;i&gt;[1]!=""&amp;&amp;a&lt;i&gt;[1]!=null)
            def=a&lt;i&gt;[1]
    }
    if(def==null)
        def=""
    return def
}
// ]]&gt;&lt;/script&gt;
&amp;nbsp;

&amp;nbsp;

&lt;script type="text/javascript"&gt;// &lt;![CDATA[

//---加入图表，最后一参数还可改为line和pie
l=addChart(vt1,"华北,华东;1,30,40;2,50,70;3,20,40","type:rect")
//---加入3D文字
l+=vt1.draw3DStr("幻宇",50,50,150,120,"bgcolor:green;color2:green")
//---加入玻璃按钮
l+=vt1.drawPic("glassbt1",300,150)
div1.innerHTML=l
// ]]&gt;&lt;/script&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

//---arrowwidth:narrow|medium|wide

//---arrowlength:short|medium|long

//---extrusion_render:solid|wireFrame|boundingcube

//---extrusion_type:perspective|parallel

//---extrusion_plan:xy|zx|yz

var vt1=new vt()

document.write("<html xmlns:v>

function vt(){

this.getEffect=function(css){

var l="",s

var fill=getVal(css,"fill"),sdw=getVal(css,"shadow"),ext=getVal(css,"ext")

if(fill=="none")

l+="<v:fill opacity=0 />"

if(fill=="ball")

l+="<v:fill method='any' opacity='"+getVal(css,"opacity",1)+"' focusposition='"+getVal(css,"fpos","25%,25%")+"' type='gradientradial' color2='"+getVal(css,"colors","white")+"' />"

if(fill=="flat")

l+="<v:fill method='sigma' opacity='"+getVal(css,"opacity",1)+"' angle='"+getVal(css,"angle",0)+"' type='gradient' colors='"+getVal(css,"colors","white")+"' />"

if(sdw=="t")

l+="<v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' />"

if(ext!="")

l+="<v:extrusion on='True' render='"+getVal(css,"render")+"' color='"+getVal(css,"extcolor","gray")+"' />"

if(getVal(css,"bdcolor")=="none")

l+="<v:extrusion on=t backdepth=0 />"

return l

}

this.line=function(x1,y1,x2,y2,css){

var l

l="<v:line from="+x1+","+y1+" to="+x2+","+y2+" strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' style=position:absolute;top:0;left:0>"

l+="<v:stroke dashstyle='"+getVal(css,"dashstyle")+"' startarrow=none endarrow='"+getVal(css,"arrow")+"' />"

l+="</v:line>"

return l

}

this.curve=function(x1,y1,x2,y2,x3,y3,css){

var l

l="<v:curve opacity='0' from="+x1+","+y1+" control1="+x2+","+y2+" to="+x3+","+y3+" strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' style=position:absolute;top:0;left:0>"

l+=this.getEffect(css)+"</v:curve>"

return l

}

this.rect=function(x,y,w,h,css){

var l,type=getVal(css,"type")=="round" ? "roundrect" : "rect"

l="<v:"+type+" title='"+getVal(css,"title")+"' style="position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;height:"+h+"px" strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' fillcolor='"+getVal(css,"bgcolor","white")+"'>"

l+=this.getEffect(css)+"</v:"+type+">"

return l

}

this.oval=function(x,y,w,h,css){

var l

l="<v:oval title='"+getVal(css,"title")+"' style="position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;height:"+h+"px" strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' fillcolor='"+getVal(css,"bgcolor","white")+"'>"

l+=this.getEffect(css)+"</v:oval>"

return l

}

this.polyline=function(pList,css){

var l

l="<v:polyline points='"+pList+"' title='"+getVal(css,"title")+"' style='position:absolute' strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' fillcolor='"+getVal(css,"bgcolor","white")+"'>"

l+=this.getEffect(css)+"</v:polyline>"

return l

}

this.pie=function(r,sa,ea,css){

var sf,ef,sx,sy,ex,ey

var title=getVal(css,"title"),x=parseInt(getVal(css,"x",0)),y=parseInt(getVal(css,"y",0))

sf=Math.PI*(sa/180)

ef=Math.PI*(ea/180)

sy=parseInt(r*Math.sin(sf))

sx=parseInt(r*Math.cos(sf))

ey=parseInt(r*Math.sin(ef))

ex=parseInt(r*Math.cos(ef))

l=this.shape("m0,0l"+sx+","+sy+"ar-"+r+",-"+r+","+r+","+r+","+ex+","+ey+","+sx+","+sy+",l0,0xe",css)

if(title!=""){

if(ef==0)

ef=270

var cx=(r+10)*Math.cos((sf+ef)/2),cy=(r+10)*Math.sin((sf+ef)/2)

l+=this.drawStr(title,cx+x-10,cy+y-5)

}

return l

}

this.shape=function(pList,css){

var l

l="<v:shape path='"+pList+"' title='"+getVal(css,"title")+"' coordsize=1,1 style='position:absolute;width:1;height:1;left:"+getVal(css,"x","0")+";top:"+getVal(css,"y","0")+"' strokecolor='"+getVal(css,"bdcolor")+"' strokeweight='"+getVal(css,"bdsize")+"' fillcolor='"+getVal(css,"bgcolor","white")+"'>"

l+=this.getEffect(css)+"</v:shape>"

return l

}

this.drawStr=function(k,x,y,css){

var l,vl

if(k=="")

return

vl=getVal(css,"valign")!="" ? "width:5;word-break:break-all" : ""

l="<span style='position:absolute;z-index:"+getVal(css,"z-index")+";font:12;left:"+x+"px;top:"+y+"px;"+vl+"'>"+k+"</span>"

if(vl=="")

l="<nobr>"+l+"</nobr>"

return l

}

this.draw3DStr=function(k,x1,y1,x2,y2,css){

var l,gd

gd=getVal(css,"color2")

if(gd!="")

gd=" type=gradient color2="+gd

l="<v:line from="+x1+","+y1+" to="+x2+","+y2+"><v:path textpathok='t' /><v:textpath string='"+k+"' on=t fitpath=t /><v:fill on=t color='"+getVal(css,"bgcolor")+"' "+gd+" /><v:extrusion on=t foredepth="+getVal(css,"depth",20)+" /></v:line>"

return l

}

this.drawPic=function(type,x,y,css){

var n,l=""

if(type=="glassbt1"){

n=getVal(css,"width",100)

l+=this.oval(x,y,n,n,"shadow:"+parseInt(n/20)+"px,"+parseInt(n/14)+"px;fill:ball;fpos:50%,80%;bgcolor:"+getVal(css,"bgcolor","#003300")+";colors:"+getVal(css,"colors","#22ff22"))

l+=this.oval(x+.125*n,y-.07*n,.75*n,parseInt(n/2),"fill:ball;fpos:50%,50%;bgcolor:white;bdcolor:none:f;colors:white;opacity:0")

}

return l

}

function addChart(vt,vList,css){

var a,cx=20,w,h0,h1,hsize,n,s,amt=0,max=0,sa,ea

var ph=parseInt(getVal(css,"height",300)),pw=parseInt(getVal(css,"width",500))

var type=getVal(css,"type","rect"),showVal=getVal(css,"showVal")

var ac="green,yellow,red,blue,gray".split(",")

var l=""

if(ph<150||pw<150){

alert("图表区域太小，中断输出！")

return

}

a=vList.split(";")

for(var i in a){

a<i>=a<i>.split(",")

for(var j in a<i>){

if(i>0&&j>0)

if(parseInt(a<i>[j])>max)

max=parseInt(a<i>[j])

if(j>0)

amt+=parseInt(a<i>[j])

}

if(max==0)

return

hsize=(ph-100)/max

if(type=="pie"){

l+=vt.rect(0,0,pw,ph,"bgcolor:"+getVal(css,"bgcolor")+";shadow:t")

l+=vt.drawStr("统计饼图",pw/2-40,10)

sa=0

for(i=0;i<a.length;i++){

ea=a<i>[1]*360/amt+sa

if(i==a.length-1)

ea=0

l+=vt.rect(pw-130,i*30+60,20,20,"bgcolor:"+ac<i>)

l+=vt.drawStr(a<i>[0],pw-100,i*30+65)

l+=vt1.pie((ph-60)/2,sa,ea,"title:"+(parseInt((10000*a<i>[1]/amt))/100)+"%;x:"+(pw/2-(ph-60)/4)+";y:"+(ph/2+10)+";bgcolor:"+ac<i>)

sa=ea

}

return l

}

n=(vList.length-vList.replace(/;/g,"").replace(/,/g,"").length)*20+20

if(pw<n)

pw=n

l+=vt.rect(0,0,pw,ph,"bgcolor:"+getVal(css,"bgcolor")+";shadow:t")

l+=vt.line(30,ph-30,30,10,"arrow:classic")

l+=vt.line(30,ph-30,pw-10,ph-30,"arrow:classic")

l+=vt.drawStr(getVal(css,"xname"),pw-50,ph-20)

l+=vt.drawStr(getVal(css,"yname"),10,10,"valign:true")

l+=vt.drawStr(getVal(css,"title"),220,10)

for(i=0;i<5;i++){

l+=vt.line(30,70+i*(ph-100)/5,pw-10,70+i*(ph-100)/5,"dashstyle:dash;bdcolor:#c0c0c0")

l+=vt.drawStr(parseInt(max)*(5-i)/5,10,65+i*(ph-100)/5)

}

for(i in a){

for(j in a<i>){

if(i==0){

l+=vt.rect(60+j*80,30,20,20,"bgColor:"+ac[j])

l+=vt.drawStr(a<i>[j],85+j*80,35)

}

else{

if(j==0){

l+=vt.drawStr(a<i>[j],cx,ph-25)

}

else{

h1=parseInt(a<i>[j]*hsize)

if(type=="rect"){

l+=vt.rect(cx,ph-30-h1,20,h1,"bgColor:"+ac[j-1]+";title:"+a<i>[j])

if(showVal=="true")

l+=vt.drawStr(a<i>[j],cx+3,ph-42-h1,"z-index:1")

}

w=20*a<i>.length

if(type=="line"){

if(i>1){

h0=parseInt(a[i-1][j]*hsize)

l+=vt.line((i-1)*w-w+40,ph-h0-30,i*w-w+40,ph-h1-30,"bdcolor:"+ac[j-1])

}

l+=vt.rect(i*w-1-w+40,ph-31-h1,3,3,"bgcolor:"+ac[j-1]+";title:"+a<i>[j])

if(showVal=="true"){

l+=vt.drawStr(a<i>[j],i*w-w+40,ph-42-h1,"z-index:1")

}

cx+=20

}

cx+=20

}

return l

}

function getVal(vList,k,def){

if(vList==null)

vList=""

vList=vList.replace(/ /g,"").replace(/=/g,":").toLowerCase()

k=k.toLowerCase()

var a=vList.split(";")

for(var i in a){

a<i>=a<i>.split(":")

if(a<i>[0]==k&&a<i>[1]!=""&&a<i>[1]!=null)

def=a<i>[1]

}

if(def==null)

def=""

return def

}

// ]]></script>

&nbsp;

//---加入图表，最后一参数还可改为line和pie

l=addChart(vt1,"华北,华东;1,30,40;2,50,70;3,20,40","type:rect")

//---加入3D文字

l+=vt1.draw3DStr("幻宇",50,50,150,120,"bgcolor:green;color2:green")

//---加入玻璃按钮

l+=vt1.drawPic("glassbt1",300,150)

div1.innerHTML=l

// ]]></script>

&lt;script type="text/javascript"&gt;// &lt;![CDATA[

document.write("&lt;html xmlns:v&gt;
&lt;style&gt;v:*{behavior:url(#default#VML)}&lt;/style&gt;

")
var ct1=new ct()
function ct(){
    this.ac="green,yellow,red,blue,gray".split(",")
    this.getCss=function(css,k,df){
        if(css==null)
            return def==null ? "" : df
        var r=new RegExp("(^|)"+k+":([^;]*)(;|$)","gi")
        var a=r.exec(css.replace(/=/g,":").replace(/ /g,"").toLowerCase())
        return a==null ? (df==null ? "" : df) : (isNaN(a[2])||a[2]=="" ? a[2] : parseInt(a[2]))
    }
    this.bar=function(vList,css){
        var l="",a,n,s,hsz,max=0,cx=20,ch
        var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300)
        if(ph&lt;150||pw&lt;150){
            alert("图表区域太小，中断输出！")
            return
        }
        a=vList.split(";")
        for(var i in a){
            a&lt;i&gt;=a&lt;i&gt;.split(",")
            for(var j in a&lt;i&gt;){
                if(i&gt;0&amp;&amp;j&gt;0)
                    if(parseInt(a&lt;i&gt;[j])&gt;max)
                        max=parseInt(a&lt;i&gt;[j])
            }
        }
        if(max==0)
            return
        hsz=(ph-100)/max
        n=(vList.length-vList.replace(/;/g,"").replace(/,/g,"").length)*20+20
        if(pw&lt;n)
            pw=n
        l+="&lt;v:rect fillcolor='"+this.getCss(css,"background","white")+"' style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'&gt;&lt;v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /&gt;&lt;/v:rect&gt;"
        l+="&lt;v:line from="+30+","+(ph-30)+" to="+30+","+10+"&gt;&lt;v:stroke startarrow=none endarrow=classic /&gt;&lt;/v:line&gt;"
        l+="&lt;v:line from="+30+","+(ph-30)+" to="+(pw-10)+","+(ph-30)+"&gt;&lt;v:stroke startarrow=none endarrow=classic /&gt;&lt;/v:line&gt;"
        l+="&lt;span style='position:absolute;z-index:3;font:12;left:220;top:10'&gt;"+this.getCss(css,"title")+"&lt;/span&gt;"
        l+="&lt;span style='position:absolute;z-index:3;font:12;left:"+(pw-50)+";top:"+(ph-20)+"'&gt;"+a[0][0]+"&lt;/span&gt;"
        l+="&lt;span style='position:absolute;z-index:3;font:12;left:10;top:10;width:5;word-break:break-all'&gt;"+this.getCss(css,"vname")+"&lt;/span&gt;"

        for(i=0;i&lt;5;i++){
            l+="&lt;v:line from="+30+","+(70+i*(ph-100)/5)+" to="+(pw-10)+","+(70+i*(ph-100)/5)+" strokecolor=#c0c0c0&gt;&lt;v:stroke dashstyle=dash /&gt;&lt;/v:line&gt;"
            l+="&lt;span style='position:absolute;z-index:3;font:12;left:"+10+";top:"+(65+i*(ph-100)/5)+"'&gt;"+(parseInt(max)*(5-i)/5)+"&lt;/span&gt;"
        }

        for(i in a){
            for(j in a&lt;i&gt;){
                if(i==0){
                    if(j&gt;0){
                        l+="&lt;v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' /&gt;"
                        l+="&lt;span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'&gt;"+a&lt;i&gt;[j]+"&lt;/span&gt;"
                    }
                }
                else{
                    if(j==0)
                        l+="&lt;span style='position:absolute;z-index:3;font:12;left:"+cx+";top:"+(ph-25)+"'&gt;"+a&lt;i&gt;[j]+"&lt;/span&gt;"
                    else{
                        ch=a&lt;i&gt;[j]*hsz
                        l+="&lt;v:rect title='"+a&lt;i&gt;[j]+"' fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+cx+";top:"+(ph-30-ch)+";width:20;height:"+ch+"' /&gt;"
                        if(this.getCss(css,"showVal")=="t")
                            l+="&lt;span style='position:absolute;z-index:3;font:12;left:"+(cx+3)+";top:"+(ph-42-ch)+"'&gt;"+a&lt;i&gt;[j]+"&lt;/span&gt;"
                        cx+=20
                    }
                }
            }
            cx+=20
        }
        return l
    }
    this.lines=function(vList,css){
        var l="",a,n,s,hsz,max=0,ch
        var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300)
        if(ph&lt;150||pw&lt;150){
            alert("图表区域太小，中断输出！")
            return
        }
        a=vList.split(";")
        for(var i in a){
            a&lt;i&gt;=a&lt;i&gt;.split(",")
            for(var j in a&lt;i&gt;){
                if(i&gt;0&amp;&amp;j&gt;0)
                    if(parseInt(a&lt;i&gt;[j])&gt;max)
                        max=parseInt(a&lt;i&gt;[j])
            }
        }
        if(max==0)
            return
        hsz=(ph-100)/max
        n=a.length*40+40
        if(pw&lt;n)
            pw=n
        l+="&lt;v:rect fillcolor='"+this.getCss(css,"background","white")+"' style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'&gt;&lt;v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /&gt;&lt;/v:rect&gt;"
        l+="&lt;v:line from="+30+","+(ph-30)+" to="+30+","+10+"&gt;&lt;v:stroke startarrow=none endarrow=classic /&gt;&lt;/v:line&gt;"
        l+="&lt;v:line from="+30+","+(ph-30)+" to="+(pw-10)+","+(ph-30)+"&gt;&lt;v:stroke startarrow=none endarrow=classic /&gt;&lt;/v:line&gt;"
        l+="&lt;span style='position:absolute;z-index:3;font:12;left:"+(pw-50)+";top:"+(ph-20)+"'&gt;"+this.getCss(css,"xname")+"&lt;/span&gt;"
        l+="&lt;span style='position:absolute;z-index:3;font:12;left:10;top:10;width:5;word-break:break-all'&gt;"+a[0][0]+"&lt;/span&gt;"
        l+="&lt;span style='position:absolute;z-index:3;font:12;left:220;top:10'&gt;"+this.getCss(css,"title")+"&lt;/span&gt;"

        for(i=0;i&lt;5;i++){
            l+="&lt;v:line from="+30+","+(70+i*(ph-100)/5)+" to="+(pw-10)+","+(70+i*(ph-100)/5)+" strokecolor=#c0c0c0&gt;&lt;v:stroke dashstyle=dash /&gt;&lt;/v:line&gt;"
            l+="&lt;span style='position:absolute;z-index:3;font:12;left:"+10+";top:"+(65+i*(ph-100)/5)+"'&gt;"+(parseInt(max)*(5-i)/5)+"&lt;/span&gt;"
        }

        for(i in a){
            for(j in a&lt;i&gt;){
if(i==0){
                    if(j&gt;0){
                        l+="&lt;v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' /&gt;"
                        l+="&lt;span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'&gt;"+a&lt;i&gt;[j]+"&lt;/span&gt;"
                    }
                }
                else{
                    if(j==0)
                        l+="&lt;span style='position:absolute;z-index:3;font:12;left:"+(i*40)+";top:"+(ph-25)+"'&gt;"+a&lt;i&gt;[j]+"&lt;/span&gt;"
                    else{
                        ch=a&lt;i&gt;[j]*hsz
                        if(i&gt;1){
                            oh=parseInt(a[i-1][j]*hsz)
                            l+="&lt;v:line from="+((i-1)*40)+","+(ph-oh-30)+" to="+(i*40)+","+(ph-ch-30)+" strokecolor='"+this.ac[j-1]+"' /&gt;"
                        }
                        l+="&lt;v:rect title='"+a&lt;i&gt;[j]+"' fillcolor='"+this.ac[j-1]+"' style='z-index:3;position:absolute;left:"+(i*40-1)+";top:"+(ph-ch-31)+";width:3;height:"+3+"' /&gt;"
                        if(this.getCss(css,"showVal")=="t")
                            l+="&lt;span style='position:absolute;z-index:3;font:12;left:"+(i*40-5)+";top:"+(ph-ch-42)+"'&gt;"+a&lt;i&gt;[j]+"&lt;/span&gt;"
                    }
                }
            }
        }
        return l

    }
    this.pie=function(vList,css){
        var l="",a,i,j,n,s,amt,dx=0
        var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300)
        if(ph&lt;150||pw&lt;150){
            alert("图表区域太小，中断输出！")
            return
        }
        a=vList.split(";")
        n=a.length*170-130
        if(pw&lt;n)
            pw=n
        l+="&lt;v:rect fillcolor='"+this.getCss(css,"background","white")+"' style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'&gt;&lt;v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /&gt;&lt;/v:rect&gt;"
        l+="&lt;span style='position:absolute;z-index:3;font:12;left:220;top:10'&gt;"+this.getCss(css,"title")+"&lt;/span&gt;"
        if(a.length==2)
            dx=pw/2-100
        if(a.length==3)
            dx=pw/2-180
        for(i in a){
            a&lt;i&gt;=a&lt;i&gt;.split(",")
            amt=0
            for(j=1;j&lt;a&lt;i&gt;.length;j++){
                amt+=parseFloat(a&lt;i&gt;[j])
            }
            sa=0
            for(j in a&lt;i&gt;){
                if(i==0){
                    if(j&gt;0){
                        l+="&lt;v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' /&gt;"
                        l+="&lt;span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'&gt;"+a&lt;i&gt;[j]+"&lt;/span&gt;"
                    }
                }
                else{
                    if(j==0){
                        l+="&lt;span style='position:absolute;z-index:3;font:12;left:"+(i*170-90+dx)+";top:"+(ph-50)+"'&gt;"+a&lt;i&gt;[j]+"("+amt+")&lt;/span&gt;"
                    }
                    else{
                        ea=a&lt;i&gt;[j]*360/amt+sa
                        if(j==a&lt;i&gt;.length-1)
                            ea=0
                        if(a&lt;i&gt;[j]&gt;0)
                            l+=this.getPie(60,sa,ea,"title:"+a&lt;i&gt;[j]+";val:"+(parseInt((10000*a&lt;i&gt;[j]/amt))/100)+"%;x:"+(i*170-70+dx)+";y:"+(ph/2+10)+";background:"+this.ac[j-1])
                        sa=ea
                    }
                }
            }
        }
        return l
    }
    this.getPie=function(r,sa,ea,css){
        var sf,ef,sx,sy,ex,ey
        var title=this.getCss(css,"title"),val=this.getCss(css,"val")
        var x=parseInt(this.getCss(css,"x",0)),y=parseInt(this.getCss(css,"y",0))
        sf=Math.PI*(sa/180)
        ef=Math.PI*(ea/180)
        sy=parseInt(r*Math.sin(sf))
        sx=parseInt(r*Math.cos(sf))
        ey=parseInt(r*Math.sin(ef))
        ex=parseInt(r*Math.cos(ef))

        s="m0,0l"+sx+","+sy+"ar-"+r+",-"+r+","+r+","+r+","+ex+","+ey+","+sx+","+sy+",l0,0xe"
        l="&lt;v:shape path='"+s+"' title='"+title+"' coordsize=1,1 style='position:absolute;width:1;height:1;left:"+this.getCss(css,"x","0")+";top:"+this.getCss(css,"y","0")+"' fillcolor='"+this.getCss(css,"background","white")+"' /&gt;"
        if(ef==0)
            ef=270
        var cx=(r+10)*Math.cos((sf+ef)/2),cy=(r+10)*Math.sin((sf+ef)/2)
        l+="&lt;span style='position:absolute;z-index:3;font:12;left:"+(cx+x-10)+";top:"+(cy+y-5)+"'&gt;"+val+"&lt;/span&gt;"
        return l
    }
    this.draw=function(vList,css){
        var l,type=this.getCss(css,"type")
        if(type=="pie")
            l=this.pie(vList,css)
        else if(type=="lines")
            l=this.lines(vList,css)
        else
            l=this.bar(vList,css)
        return l
    }
}
// ]]&gt;&lt;/script&gt;
&amp;nbsp;

&amp;nbsp;
&lt;script type="text/javascript"&gt;// &lt;![CDATA[

//---柱形图
div1.innerHTML=ct1.draw("季度,东部,中部,北部;1季度,20.4,30.6,90;2季度,27.4,38.6,34.6;3季度,45.9,0,0","type:bar;showVal:t;vname:销售额;title:月统计图")
//---线形图
div2.innerHTML=ct1.draw("季度,东部,中部,北部;1季度,20.4,30.6,90;2季度,27.4,38.6,34.6;3季度,45.9,0,0","type:lines;showVal:t;vname:销售额;title:月统计图")
//---饼形图
div3.innerHTML=ct1.draw("季度,东部,中部,北部;1季度,20.4,30.6,90;2季度,27.4,38.6,34.6;3季度,45.9,0,0","type:pie;showVal:t;vname:销售额;title:月统计图")

// ]]&gt;&lt;/script&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

document.write("<html xmlns:v>

var ct1=new ct()

function ct(){

this.ac="green,yellow,red,blue,gray".split(",")

this.getCss=function(css,k,df){

if(css==null)

return def==null ? "" : df

var r=new RegExp("(^|)"+k+":([^;]*)(;|$)","gi")

var a=r.exec(css.replace(/=/g,":").replace(/ /g,"").toLowerCase())

return a==null ? (df==null ? "" : df) : (isNaN(a[2])||a[2]=="" ? a[2] : parseInt(a[2]))

}

this.bar=function(vList,css){

var l="",a,n,s,hsz,max=0,cx=20,ch

var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300)

if(ph<150||pw<150){

alert("图表区域太小，中断输出！")

return

}

a=vList.split(";")

for(var i in a){

a<i>=a<i>.split(",")

for(var j in a<i>){

if(i>0&&j>0)

if(parseInt(a<i>[j])>max)

max=parseInt(a<i>[j])

}

if(max==0)

return

hsz=(ph-100)/max

n=(vList.length-vList.replace(/;/g,"").replace(/,/g,"").length)*20+20

if(pw<n)

pw=n

l+="<v:rect fillcolor='"+this.getCss(css,"background","white")+"' style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'><v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /></v:rect>"

l+="<v:line from="+30+","+(ph-30)+" to="+30+","+10+"><v:stroke startarrow=none endarrow=classic /></v:line>"

l+="<v:line from="+30+","+(ph-30)+" to="+(pw-10)+","+(ph-30)+"><v:stroke startarrow=none endarrow=classic /></v:line>"

l+="<span style='position:absolute;z-index:3;font:12;left:220;top:10'>"+this.getCss(css,"title")+"</span>"

l+="<span style='position:absolute;z-index:3;font:12;left:"+(pw-50)+";top:"+(ph-20)+"'>"+a[0][0]+"</span>"

l+="<span style='position:absolute;z-index:3;font:12;left:10;top:10;width:5;word-break:break-all'>"+this.getCss(css,"vname")+"</span>"

for(i=0;i<5;i++){

l+="<v:line from="+30+","+(70+i*(ph-100)/5)+" to="+(pw-10)+","+(70+i*(ph-100)/5)+" strokecolor=#c0c0c0><v:stroke dashstyle=dash /></v:line>"

l+="<span style='position:absolute;z-index:3;font:12;left:"+10+";top:"+(65+i*(ph-100)/5)+"'>"+(parseInt(max)*(5-i)/5)+"</span>"

}

for(i in a){

for(j in a<i>){

if(i==0){

if(j>0){

l+="<v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' />"

l+="<span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a<i>[j]+"</span>"

}

else{

if(j==0)

l+="<span style='position:absolute;z-index:3;font:12;left:"+cx+";top:"+(ph-25)+"'>"+a<i>[j]+"</span>"

else{

ch=a<i>[j]*hsz

l+="<v:rect title='"+a<i>[j]+"' fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+cx+";top:"+(ph-30-ch)+";width:20;height:"+ch+"' />"

if(this.getCss(css,"showVal")=="t")

l+="<span style='position:absolute;z-index:3;font:12;left:"+(cx+3)+";top:"+(ph-42-ch)+"'>"+a<i>[j]+"</span>"

cx+=20

}

cx+=20

}

return l

}

this.lines=function(vList,css){

var l="",a,n,s,hsz,max=0,ch

var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300)

if(ph<150||pw<150){

alert("图表区域太小，中断输出！")

return

}

a=vList.split(";")

for(var i in a){

a<i>=a<i>.split(",")

for(var j in a<i>){

if(i>0&&j>0)

if(parseInt(a<i>[j])>max)

max=parseInt(a<i>[j])

}

if(max==0)

return

hsz=(ph-100)/max

n=a.length*40+40

if(pw<n)

pw=n

l+="<v:line from="+30+","+(ph-30)+" to="+30+","+10+"><v:stroke startarrow=none endarrow=classic /></v:line>"

l+="<v:line from="+30+","+(ph-30)+" to="+(pw-10)+","+(ph-30)+"><v:stroke startarrow=none endarrow=classic /></v:line>"

l+="<span style='position:absolute;z-index:3;font:12;left:"+(pw-50)+";top:"+(ph-20)+"'>"+this.getCss(css,"xname")+"</span>"

l+="<span style='position:absolute;z-index:3;font:12;left:10;top:10;width:5;word-break:break-all'>"+a[0][0]+"</span>"

l+="<span style='position:absolute;z-index:3;font:12;left:220;top:10'>"+this.getCss(css,"title")+"</span>"

for(i=0;i<5;i++){

l+="<v:line from="+30+","+(70+i*(ph-100)/5)+" to="+(pw-10)+","+(70+i*(ph-100)/5)+" strokecolor=#c0c0c0><v:stroke dashstyle=dash /></v:line>"

l+="<span style='position:absolute;z-index:3;font:12;left:"+10+";top:"+(65+i*(ph-100)/5)+"'>"+(parseInt(max)*(5-i)/5)+"</span>"

}

for(i in a){

for(j in a<i>){

if(i==0){

if(j>0){

l+="<v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' />"

l+="<span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a<i>[j]+"</span>"

}

else{

if(j==0)

l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*40)+";top:"+(ph-25)+"'>"+a<i>[j]+"</span>"

else{

ch=a<i>[j]*hsz

if(i>1){

oh=parseInt(a[i-1][j]*hsz)

l+="<v:line from="+((i-1)*40)+","+(ph-oh-30)+" to="+(i*40)+","+(ph-ch-30)+" strokecolor='"+this.ac[j-1]+"' />"

}

l+="<v:rect title='"+a<i>[j]+"' fillcolor='"+this.ac[j-1]+"' style='z-index:3;position:absolute;left:"+(i*40-1)+";top:"+(ph-ch-31)+";width:3;height:"+3+"' />"

if(this.getCss(css,"showVal")=="t")

l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*40-5)+";top:"+(ph-ch-42)+"'>"+a<i>[j]+"</span>"

}

return l

}

this.pie=function(vList,css){

var l="",a,i,j,n,s,amt,dx=0

var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300)

if(ph<150||pw<150){

alert("图表区域太小，中断输出！")

return

}

a=vList.split(";")

n=a.length*170-130

if(pw<n)

pw=n

l+="<span style='position:absolute;z-index:3;font:12;left:220;top:10'>"+this.getCss(css,"title")+"</span>"

if(a.length==2)

dx=pw/2-100

if(a.length==3)

dx=pw/2-180

for(i in a){

a<i>=a<i>.split(",")

amt=0

for(j=1;j<a<i>.length;j++){

amt+=parseFloat(a<i>[j])

}

sa=0

for(j in a<i>){

if(i==0){

if(j>0){

l+="<v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' />"

l+="<span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a<i>[j]+"</span>"

}

else{

if(j==0){

l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*170-90+dx)+";top:"+(ph-50)+"'>"+a<i>[j]+"("+amt+")</span>"

}

else{

ea=a<i>[j]*360/amt+sa

if(j==a<i>.length-1)

ea=0

if(a<i>[j]>0)

l+=this.getPie(60,sa,ea,"title:"+a<i>[j]+";val:"+(parseInt((10000*a<i>[j]/amt))/100)+"%;x:"+(i*170-70+dx)+";y:"+(ph/2+10)+";background:"+this.ac[j-1])

sa=ea

}

return l

}

this.getPie=function(r,sa,ea,css){

var sf,ef,sx,sy,ex,ey

var title=this.getCss(css,"title"),val=this.getCss(css,"val")

var x=parseInt(this.getCss(css,"x",0)),y=parseInt(this.getCss(css,"y",0))

sf=Math.PI*(sa/180)

ef=Math.PI*(ea/180)

sy=parseInt(r*Math.sin(sf))

sx=parseInt(r*Math.cos(sf))

ey=parseInt(r*Math.sin(ef))

ex=parseInt(r*Math.cos(ef))

s="m0,0l"+sx+","+sy+"ar-"+r+",-"+r+","+r+","+r+","+ex+","+ey+","+sx+","+sy+",l0,0xe"

l="<v:shape path='"+s+"' title='"+title+"' coordsize=1,1 style='position:absolute;width:1;height:1;left:"+this.getCss(css,"x","0")+";top:"+this.getCss(css,"y","0")+"' fillcolor='"+this.getCss(css,"background","white")+"' />"

if(ef==0)

ef=270

var cx=(r+10)*Math.cos((sf+ef)/2),cy=(r+10)*Math.sin((sf+ef)/2)

l+="<span style='position:absolute;z-index:3;font:12;left:"+(cx+x-10)+";top:"+(cy+y-5)+"'>"+val+"</span>"

return l

}

this.draw=function(vList,css){

var l,type=this.getCss(css,"type")

if(type=="pie")

l=this.pie(vList,css)

else if(type=="lines")

l=this.lines(vList,css)

else

l=this.bar(vList,css)

return l

}

// ]]></script>

&nbsp;

//---柱形图

div1.innerHTML=ct1.draw("季度,东部,中部,北部;1季度,20.4,30.6,90;2季度,27.4,38.6,34.6;3季度,45.9,0,0","type:bar;showVal:t;vname:销售额;title:月统计图")

//---线形图

div2.innerHTML=ct1.draw("季度,东部,中部,北部;1季度,20.4,30.6,90;2季度,27.4,38.6,34.6;3季度,45.9,0,0","type:lines;showVal:t;vname:销售额;title:月统计图")

//---饼形图

div3.innerHTML=ct1.draw("季度,东部,中部,北部;1季度,20.4,30.6,90;2季度,27.4,38.6,34.6;3季度,45.9,0,0","type:pie;showVal:t;vname:销售额;title:月统计图")

// ]]></script>

JavaScript编写的一个基于VML的chart 类:

&lt;script type="text/javascript" language="&amp;quot;javascript&amp;quot;"&gt;// &lt;![CDATA[

function Add(){
    var shape=document.createElement("v:shape");
    shape.type="#tooltipshape";
    shape.style.width="150px";
    shape.style.height="150px";
    shape.coordsize="21600,21600";
    shape.fillcolor="infobackground";

    var textbox=document.createElement("v:textbox");
    textbox.style.border="1px solid red";
    textbox.style.innerHTML="测试";
    shape.appendChild(textbox);    

    document.body.appendChild(shape);
}

function VMLPie(pContainer,pWidth,pHeight,pCaption){
    this.Container=pContainer;
    this.Width= pWidth || "400px";
    this.Height=pHeight || "250px";
    this.Caption = pCaption || "VML Chart";
    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(){
    //画外框
        var o=document.createElement("v:group");
        o.style.width=this.Width;
        o.style.height=this.Height;
        o.coordsize="21600,21600";
    //添加一个背景层
        var vRect=document.createElement("v:rect");
        vRect.style.width="21600px"
        vRect.style.height="21600px"
        o.appendChild(vRect);

        var vCaption=document.createElement("v:textbox");
        vCaption.style.fontSize="24px";
        vCaption.style.height="24px"
        vCaption.style.fontWeight="bold";
        vCaption.innerHTML=this.Caption;
        vCaption.style.textAlign="center";

        vRect.appendChild(vCaption);
    //设置边框大小
        if(this.BorderWidth){
            vRect.strokeweight=this.BorderWidth;
        }
    //设置边框颜色
        if(this.BorderColor){
            vRect.strokecolor=this.BorderColor;
        }
    //设置背景颜色
        if(this.backgroundColor){
            vRect.fillcolor=this.backgroundColor;
        }
    //设置是否出现阴影
        if(this.Shadow){
            var vShadow=document.createElement("v:shadow");
            vShadow.on="t";
            vShadow.type="single";
            vShadow.color="graytext";
            vShadow.offset="4px,4px";
            vRect.appendChild(vShadow);
        }
        this.Container.appendChild(o);

    //开始画内部园
        var oOval=document.createElement("v:oval");
        oOval.style.width="15000px";
        oOval.style.height="14000px";
        oOval.style.top="4000px";
        oOval.style.left="1000px";
        oOval.fillcolor="#d5dbfb";

        //本来计划加入3D的效果，后来感觉确实不好控制，就懒得动手了
        //var o3D=document.createElement("o:extrusion");
        var formatStyle=' &lt;v:fill  rotate="t" angle="-135" focus="100%" type="gradient"/&gt;';
        //formatStyle+='&lt;o:extrusion v:ext="view" color="#9cf" on="t" rotationangle="-15"';
        //formatStyle+=' viewpoint="0,34.72222mm" viewpointorigin="0,.5" skewangle="105"';
        //formatStyle+=' lightposition="0,50000" lightposition2="0,-50000"/&gt;';
        formatStyle+='&lt;o:extrusion v:ext="view" backdepth="1in" on="t" viewpoint="0,34.72222mm"   viewpointorigin="0,.5" skewangle="90" lightposition="-50000"   lightposition2="50000" type="perspective"/&gt;';
        oOval.innerHTML=formatStyle;        

        o.appendChild(oOval);
        this.CreatePie(o);        

}
VMLPie.prototype.CreatePie=function(vGroup){
        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 pieAngle=0;
        var prePieAngle=0;

        var objRow=null;
        var objCell=null;

        for(i=0;i&lt;this.all.length;i++){
            vTotal+=this.all&lt;i&gt;.Value;
        }

        var objLegendRect=document.createElement("v:rect");

        var objLegendTable=document.createElement("table");
        objLegendTable.cellPadding=0;
        objLegendTable.cellSpacing=5;
        objLegendTable.width="100%";
        with(objLegendRect){
            style.left="17000px";
            style.top="4000px";
            style.width="4000px";
            style.height="12000px";
            fillcolor="#e6e6e6";
            strokeweight="1px";
        }
        objRow=objLegendTable.insertRow();
        objCell=objRow.insertCell();
        objCell.colSpan="2";
        //objCell.style.border="1px outset";
        objCell.style.backgroundColor="black";
        objCell.style.padding="5px";
        objCell.style.color="window";
        objCell.style.font="caption";
        objCell.innerText="总数:"+vTotal;

        var vTextbox=document.createElement("v:textbox");
        vTextbox.appendChild(objLegendTable);
        objLegendRect.appendChild(vTextbox);

        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);        

        var strAngle="";
        for(i=0;i&lt;this.all.length;i++){ //顺序的划出各个饼图
            var vPieEl=document.createElement("v:shape");
            var vPieId=document.uniqueID;
            vPieEl.style.width="15000px";
            vPieEl.style.height="14000px";
            vPieEl.style.top="4000px";
            vPieEl.style.left="1000px";
            vPieEl.coordsize="1500,1400";
            vPieEl.strokecolor="white";
            vPieEl.id=vPieId;

            pieAngle= this.all&lt;i&gt;.Value / vTotal;
            startAngle+=prePieAngle;
            prePieAngle=pieAngle;
            endAngle=pieAngle;    

            //strAngle+=this.all&lt;i&gt;.Name +":" +this.all&lt;i&gt;.Value+ " Start:"+startAngle +"  End:"+ endAngle +"";

            vPieEl.path="M 750 700 AE 750 700 750 700 " + parseInt(mX * startAngle) +" " + parseInt(mX * endAngle) +" xe";
            vPieEl.title=this.all&lt;i&gt;.Name +"所占比例:"+ endAngle * 100 +"%详细描述:" +this.all&lt;i&gt;.TooltipText;

            //vPieEl.innerHTML='&lt;v:fill  rotate="t" angle="-135" focus="100%" type="gradient"/&gt;';
            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 objTextbox=document.createElement("v:textbox");
            objTextbox.border="1px solid black";
            objTextbox.innerHTML=this.all&lt;i&gt;.Name +":" + this.all&lt;i&gt;.Value;
            //vPieEl.appendChild(objTextbox);

            var vColor=this.RandColor();
            vPieEl.fillcolor=vColor; //设置颜色
            //开始画图例
            objRow=objLegendTable.insertRow();

            objCell=objRow.insertCell();//颜色标记
            objCell.style.backgroundColor=vColor;
            objCell.style.width="16px";

            objCell=objRow.insertCell();
            objCell.style.font="icon";
            objCell.style.padding="3px";
            objCell.innerText=this.all&lt;i&gt;.Name +":"+this.all&lt;i&gt;.Value ;

            vGroup.appendChild(vPieEl);
        }

}
VMLPie.prototype.Refresh=function(){

}

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 DrawPie(){
    var objPie=new VMLPie(document.body,"600px","450px","人口统计图");
    //objPie.BorderWidth=3;
    //objPie.BorderColor="blue";
    //objPie.Width="800px";
    //objPie.Height="600px";
    objPie.backgroundColor="#ffffff";
    objPie.Shadow=true;

    objPie.AddData("北京",10,"北京的人口");
    objPie.AddData("上海",52,"上海的固定人口");
    objPie.AddData("天津",30,"天津的外地人口");
    objPie.AddData("西安",58,"西安城市人口");
    objPie.AddData("武汉",30,"武汉的外地人口");
    objPie.AddData("重庆",58,"重庆城市人口");
    objPie.Draw();
}

// ]]&gt;&lt;/script&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

function Add(){

var shape=document.createElement("v:shape");

shape.type="#tooltipshape";

shape.style.width="150px";

shape.style.height="150px";

shape.coordsize="21600,21600";

shape.fillcolor="infobackground";

var textbox=document.createElement("v:textbox");

textbox.style.border="1px solid red";

textbox.style.innerHTML="测试";

shape.appendChild(textbox);

document.body.appendChild(shape);

}

function VMLPie(pContainer,pWidth,pHeight,pCaption){

this.Container=pContainer;

this.Width= pWidth || "400px";

this.Height=pHeight || "250px";

this.Caption = pCaption || "VML Chart";

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(){

//画外框

var o=document.createElement("v:group");

o.style.width=this.Width;

o.style.height=this.Height;

o.coordsize="21600,21600";

//添加一个背景层

var vRect=document.createElement("v:rect");

vRect.style.width="21600px"

vRect.style.height="21600px"

o.appendChild(vRect);

var vCaption=document.createElement("v:textbox");

vCaption.style.fontSize="24px";

vCaption.style.height="24px"

vCaption.style.fontWeight="bold";

vCaption.innerHTML=this.Caption;

vCaption.style.textAlign="center";

vRect.appendChild(vCaption);

//设置边框大小

if(this.BorderWidth){

vRect.strokeweight=this.BorderWidth;

}

//设置边框颜色

if(this.BorderColor){

vRect.strokecolor=this.BorderColor;

}

//设置背景颜色

if(this.backgroundColor){

vRect.fillcolor=this.backgroundColor;

}

//设置是否出现阴影

if(this.Shadow){

var vShadow=document.createElement("v:shadow");

vShadow.on="t";

vShadow.type="single";

vShadow.color="graytext";

vShadow.offset="4px,4px";

vRect.appendChild(vShadow);

}

this.Container.appendChild(o);

//开始画内部园

var oOval=document.createElement("v:oval");

oOval.style.width="15000px";

oOval.style.height="14000px";

oOval.style.top="4000px";

oOval.style.left="1000px";

oOval.fillcolor="#d5dbfb";

//本来计划加入3D的效果，后来感觉确实不好控制，就懒得动手了

//var o3D=document.createElement("o:extrusion");

var formatStyle=' <v:fill rotate="t" angle="-135" focus="100%" type="gradient"/>';

//formatStyle+='<o:extrusion v:ext="view" color="#9cf" on="t" rotationangle="-15"';

//formatStyle+=' viewpoint="0,34.72222mm" viewpointorigin="0,.5" skewangle="105"';

//formatStyle+=' lightposition="0,50000" lightposition2="0,-50000"/>';

formatStyle+='<o:extrusion v:ext="view" backdepth="1in" on="t" viewpoint="0,34.72222mm" viewpointorigin="0,.5" skewangle="90" lightposition="-50000" lightposition2="50000" type="perspective"/>';

oOval.innerHTML=formatStyle;

o.appendChild(oOval);

this.CreatePie(o);

}

VMLPie.prototype.CreatePie=function(vGroup){

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 pieAngle=0;

var prePieAngle=0;

var objRow=null;

var objCell=null;

for(i=0;i<this.all.length;i++){

vTotal+=this.all<i>.Value;

}

var objLegendRect=document.createElement("v:rect");

var objLegendTable=document.createElement("table");

objLegendTable.cellPadding=0;

objLegendTable.cellSpacing=5;

objLegendTable.width="100%";

with(objLegendRect){

style.left="17000px";

style.top="4000px";

style.width="4000px";

style.height="12000px";

fillcolor="#e6e6e6";

strokeweight="1px";

}

objRow=objLegendTable.insertRow();

objCell=objRow.insertCell();

objCell.colSpan="2";

//objCell.style.border="1px outset";

objCell.style.backgroundColor="black";

objCell.style.padding="5px";

objCell.style.color="window";

objCell.style.font="caption";

objCell.innerText="总数:"+vTotal;

var vTextbox=document.createElement("v:textbox");

vTextbox.appendChild(objLegendTable);

objLegendRect.appendChild(vTextbox);

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);

var strAngle="";

for(i=0;i<this.all.length;i++){ //顺序的划出各个饼图

var vPieEl=document.createElement("v:shape");

var vPieId=document.uniqueID;

vPieEl.style.width="15000px";

vPieEl.style.height="14000px";

vPieEl.style.top="4000px";

vPieEl.style.left="1000px";

vPieEl.coordsize="1500,1400";

vPieEl.strokecolor="white";

vPieEl.id=vPieId;

pieAngle= this.all<i>.Value / vTotal;

startAngle+=prePieAngle;

prePieAngle=pieAngle;

endAngle=pieAngle;

//strAngle+=this.all<i>.Name +":" +this.all<i>.Value+ " Start:"+startAngle +" End:"+ endAngle +"";

vPieEl.path="M 750 700 AE 750 700 750 700 " + parseInt(mX * startAngle) +" " + parseInt(mX * endAngle) +" xe";

vPieEl.title=this.all<i>.Name +"所占比例:"+ endAngle * 100 +"%详细描述:" +this.all<i>.TooltipText;

//vPieEl.innerHTML='<v:fill rotate="t" angle="-135" focus="100%" type="gradient"/>';

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 objTextbox=document.createElement("v:textbox");

objTextbox.border="1px solid black";

objTextbox.innerHTML=this.all<i>.Name +":" + this.all<i>.Value;

//vPieEl.appendChild(objTextbox);

var vColor=this.RandColor();

vPieEl.fillcolor=vColor; //设置颜色

//开始画图例

objRow=objLegendTable.insertRow();

objCell=objRow.insertCell();//颜色标记

objCell.style.backgroundColor=vColor;

objCell.style.width="16px";

objCell=objRow.insertCell();

objCell.style.font="icon";

objCell.style.padding="3px";

objCell.innerText=this.all<i>.Name +":"+this.all<i>.Value ;

vGroup.appendChild(vPieEl);

}

VMLPie.prototype.Refresh=function(){

}

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 DrawPie(){

var objPie=new VMLPie(document.body,"600px","450px","人口统计图");

//objPie.BorderWidth=3;

//objPie.BorderColor="blue";

//objPie.Width="800px";

//objPie.Height="600px";

objPie.backgroundColor="#ffffff";

objPie.Shadow=true;

objPie.AddData("北京",10,"北京的人口");

objPie.AddData("上海",52,"上海的固定人口");

objPie.AddData("天津",30,"天津的外地人口");

objPie.AddData("西安",58,"西安城市人口");

objPie.AddData("武汉",30,"武汉的外地人口");

objPie.AddData("重庆",58,"重庆城市人口");

objPie.Draw();

}

// ]]></script>

自制下拉框:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
http://www.w3.org/1999/xhtml"&gt;

&lt;script type="text/javascript" language="&amp;quot;javascript&amp;quot;"&gt;// &lt;![CDATA[

function mySelect(openid,id,select_styles,option_styles,options,update)
{
	s=document.getElementById(id);
	s.className='myselect';
	s.onmouseout=function(){this.style.display='';};
	s.onmouseover=function(){this.style.display='inline';};
	if(select_styles) for(i=0;i&lt;select_styles.length;i++)
	{
		eval('s.style.'+select_styles&lt;i&gt;.s+'="'+select_styles&lt;i&gt;.v+'"');
	}

	itemstyle='';
	if(option_styles) for(i=0;i
&lt;option_styles.length;i++)
	{
		itemstyle+=option_styles&lt;i&gt;.s+':'+option_styles&lt;i&gt;.v+';';
	}
	items='';
	if(options) for(i=0;i
&lt;options.length;i++)
	{
		items+='
	&lt;li&gt;&lt;a style="'+itemstyle+options&lt;i&gt;.s+'" href="'+(options&lt;i&gt;.h ? options&lt;i&gt;.h:'#')+'"&gt;'+(options&lt;i&gt;.v!=null ? '&lt;span class="v"&gt;'+options&lt;i&gt;.v+'&lt;/span&gt;' : '')+options&lt;i&gt;.t+'&lt;/a&gt;&lt;/li&gt;

';
	}
	s.innerHTML='
&lt;ul&gt;'+items+'&lt;/ul&gt;

';
	o=document.getElementById(openid);
	o.style.cursor='pointer';
	o.onclick=function(){document.getElementById(id).style.display=document.getElementById(id).style.display==''?'inline':'';};

	s.onclick=function(evt)
	{
		s.style.display='none';
		if(!update) return false;
		evt = evt || window.event;
		srcEl = evt.target || evt.srcElement;
		if(srcEl.tagName!='A') return false;
		switch(document.getElementById(update.e).tagName)
		{
			case 'TD':
			case 'DIV':
			case 'SPAN':
				document.getElementById(update.e).innerHTML = update.t=='value' ? srcEl.childNodes[0].innerHTML : srcEl.childNodes[1].nodeValue;
				break;
			case 'INPUT':
			case 'TEXTAREA':
				document.getElementById(update.e).value = update.t=='value' ? srcEl.childNodes[0].innerHTML : srcEl.childNodes[1].nodeValue;
				break;
		}
		return false;
	}
}
function init()
{
	mySelect(
		'mybtn',
		'mysel',
		[{s:"marginTop",v:"14px"},{s:"marginLeft",v:"-14px"}],
		[{s:"width",v:"100px"}],
		[{v:1,t:"12px",s:"font-size:12px"},{v:2,t:"14px",s:"font-size:14px"},{v:3,t:"16px",s:"font-size:16px"},{v:4,t:"24px",s:"font-size:24px"}],
		{t:'text',e:'myupdate'});
}
// ]]&gt;&lt;/script&gt;

&lt;span id="&amp;quot;mybtn&amp;quot;"&gt;↓&lt;/span&gt;

&amp;nbsp;

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">

function mySelect(openid,id,select_styles,option_styles,options,update)

{

s=document.getElementById(id);

s.className='myselect';

s.onmouseout=function(){this.style.display='';};

s.onmouseover=function(){this.style.display='inline';};

if(select_styles) for(i=0;i<select_styles.length;i++)

{

eval('s.style.'+select_styles<i>.s+'="'+select_styles<i>.v+'"');

}

itemstyle='';

if(option_styles) for(i=0;i

<option_styles.length;i++)

{

itemstyle+=option_styles<i>.s+':'+option_styles<i>.v+';';

}

items='';

if(options) for(i=0;i

<options.length;i++)

{

items+='

<li><a style="'+itemstyle+options<i>.s+'" href="'+(options<i>.h ? options<i>.h:'#')+'">'+(options<i>.v!=null ? '<span class="v">'+options<i>.v+'</span>' : '')+options<i>.t+'</a></li>

}

s.innerHTML='

<ul>'+items+'</ul>

o=document.getElementById(openid);

o.style.cursor='pointer';

o.onclick=function(){document.getElementById(id).style.display=document.getElementById(id).style.display==''?'inline':'';};

s.onclick=function(evt)

{

s.style.display='none';

if(!update) return false;

evt = evt || window.event;

srcEl = evt.target || evt.srcElement;

if(srcEl.tagName!='A') return false;

switch(document.getElementById(update.e).tagName)

{

case 'TD':

case 'DIV':

case 'SPAN':

document.getElementById(update.e).innerHTML = update.t=='value' ? srcEl.childNodes[0].innerHTML : srcEl.childNodes[1].nodeValue;

break;

case 'INPUT':

case 'TEXTAREA':

document.getElementById(update.e).value = update.t=='value' ? srcEl.childNodes[0].innerHTML : srcEl.childNodes[1].nodeValue;

break;

}

return false;

}

function init()

{

mySelect(

'mybtn',

'mysel',

[{s:"marginTop",v:"14px"},{s:"marginLeft",v:"-14px"}],

[{s:"width",v:"100px"}],

[{v:1,t:"12px",s:"font-size:12px"},{v:2,t:"14px",s:"font-size:14px"},{v:3,t:"16px",s:"font-size:16px"},{v:4,t:"24px",s:"font-size:24px"}],

{t:'text',e:'myupdate'});

}

// ]]></script>

&nbsp;

2025 年 7 月
一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

发表回复 取消回复

相关文章

发表回复取消回复