JavaScript实现 折线图、饼图、柱状图

Code

 　　JavaScript函数之折线图  
-----------------------------------  
〈script language=javascript〉  
function table2(total,table_x,table_y,all_width,all_height,line_no)  
{  
var line_color = "#69f";；  
var left_width = 70;；  
var total_no = total[1].length  
var temp1,temp2,temp3  
temp1 = 0;；  
for(var i=1;；i〈total_no;；i++)  
{  
for(var j=1;；j〈=line_no;；j++)  
{  
if(temp1〈total[j][i])  
temp1 = total[j][i];；  
}  
}  
temp1 = parseInt(temp1);；  
if(temp1〉9)  
{  
temp2 = temp1.toString().substr(1,1);；  
if(temp2〉4)  
{  
temp3 = (parseInt(temp1/(Math.pow(10,(temp1.toString().length-1))))+1)*Math.pow(10,(temp1.toString().length-1));；  
}  
else  
{  
temp3 = (praseInt(temp1/(Math.pow(10,(temp1.toString().length-1))))+0.5)*Math.pow(10,(temp1.toString().length-1))  
}  
}  
else  
{  
if(temp1〉4)  
{  
emp3 = 10;；  
}  
else  
{  
temp3 = 5;；  
}  
}  
temp4 = temp3;；  
document.write("〈v:rect id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:" + (table_x + left_width) + "px;；top:" + table_y + "px;；width:" + all_width + "px;；height:" + all_height + "px;；z-index:-1’ fillcolor=’#9cf’ stroked=’f’〉〈v:fill rotate=’t’ angle=’-45’ focus=’100%’ type=’gradient’/〉〈/v:rect〉");；  
for(var i=0;；i〈all_height;；i += all_height/5)  
{  
document.write("〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x + left_width + length) + "px," + (table_y + all_height - length - i) + "px’ to=’" + (table_x + all_width + left_width) + "px," + (table_y + all_height - length - i) + "px’ strokecolor=’" + line_color + "’/〉");；  
document.write("〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x + (left_width - 15)) + "px," + (table_y + i) + "px’ to=’" + (table_x + left_width) + "px," + (table_y + i) + "px’/〉");；  
document.write("〈v:shape id=’_x0000_s1025’ type=’#_x0000_t202’ alt=’’ style=’position:absolute;；left:" + table_x + "px;；top:" + (table_y + i) + "px;；width:" + left_width + "px;；height:18px;；z-index:1’〉");；  
document.write("〈v:textbox inset=’0px,0px,0px,0px’〉〈table cellspacing=’3’ cellpadding=’0’ width=’100%’ height=’100%’〉〈tr〉〈td align=’right’〉" + temp4 + "〈/td〉〈/tr〉〈/table〉〈/v:textbox〉〈/v:shape〉");；  
temp4 = temp4 - temp3/5;；  
}  
document.write("〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x + left_width) + "px," + (table_y + all_height) + "px’ to=’" + (table_x + all_width + left_width) + "px," + (table_y + all_height) + "px’/〉");；  
document.write("〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x + left_width) + "px," + table_y + "px’ to=’" + (table_x + left_width) + "px," + (table_y + all_height) + "px’/〉");；  
var tmpStr = ""  
for(i=1;；i〈=line_no;；i++)  
{  
var re = /,/g;；  
tmpStr += ",["" + total[i][0].replace(re,"","") + ""]"  
}  
tmpStr = tmpStr.substr(1,tmpStr.length-1)  
var line_code = eval("new Array(" + tmpStr + ")")  
for(var j=1;；j〈=line_no;；j++)  
{  
for(var i=1;；i〈total_no-1;；i++)  
{  
var x1 = table_x + left_width + all_width * (i - 1)/(total_no-1)  
var y1 = table_y + (temp3 - total[j][i]) * (all_height/temp3)  
var x2 = table_x + left_width + all_width * i/(total_no-1)  
var y2 = table_y + (temp3 - total[j][i+1]) * (all_height/temp3)  

document.write("〈v:line id=’_x0000_s1025’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；z-index:1’ from=’" + x1 + "px," + y1 + "px’ to=’" + x2 + "px," + y2 + "px’ coordsize=’21600,21600’ strokecolor=’" + line_code[j-1][0] + "’ strokeweight=’" + line_code[j-1][1] + "’〉");；  
switch (parseInt(line_code[j-1][2]))  
{  
case 1:  
break;；  
case 2:  
document.write("〈v:stroke dashstyle=’1 1’/〉");；  
break;；  
case 3:  
document.write("〈v:stroke dashstyle=’dash’/〉");；  
break;；  
case 4:  
document.write("〈v:stroke dashstyle=’dashDot’/〉");；  
break;；  
case 5:  
document.write("〈v:stroke dashstyle=’longDash’/〉");；  
break;；  
case 6:  
document.write("〈v:stroke dashstyle=’longDashDot’/〉");；  
break;；  
case 7:  
document.write("〈v:stroke dashstyle=’longDashDotDot’/〉");；  
break;；  
}  

document.write("〈/v:line〉");；  

switch (parseInt(line_code[j-1][3]))  
{  
case 1:  
break;；  
case 2:  
document.write("〈v:rect id=’_x0000_s1027’ style=’position:absolute;；left:" + (x1 - 2) + "px;；top:" + (y1 - 2) + "px;；width:4px;；height:4px;； z-index:2’ fillcolor=’" + line_code[j-1][0] + "’ strokecolor=’" + line_code[j-1][0] + "’/〉");；  
break;；  
case 3:  
document.write("〈v:oval id=’_x0000_s1026’ style=’position:absolute;；left:" + (x1 - 2) + "px;；top:" + (y1 - 2) + "px;；width:4px;；height:4px;；z-index:1’ fillcolor=’" + line_code[j-1][0] + "’ strokecolor=’" + line_code[j-1][0] + "’/〉");；  
break;；  
}  

}  
switch (parseInt(line_code[j-1][3]))  
{  
case 1:  
break;；  
case 2:  
document.write("〈v:rect id=’_x0000_s1027’ style=’position:absolute;；left:" + (x2 - 2) + "px;；top:" + (y2 - 2) + "px;；width:4px;；height:4px;； z-index:2’ fillcolor=’" + line_code[j-1][0] + "’ strokecolor=’" + line_code[j-1][0] + "’/〉");；  
break;；  
case 3:  
document.write("〈v:oval id=’_x0000_s1026’ style=’position:absolute;；left:" + (x2 - 2) + "px;；top:" + (y2 - 2) + "px;；width:4px;；height:4px;；z-index:1’ fillcolor=’" + line_code[j-1][0] + "’ strokecolor=’" + line_code[j-1][0] + "’/〉");；  
break;；  
}  
}  

for(var i=0;；i〈total_no-1;；i++)  
{  
document.write("〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x + left_width + all_width * (i)/(total_no-1)) + "px," + (table_y + all_height) + "px’ to=’" + (table_x + left_width + all_width * (i)/(total_no-1)) + "px," + (table_y + all_height + 15) + "px’/〉");；  
document.write("〈v:shape id=’_x0000_s1025’ type=’#_x0000_t202’ alt=’’ style=’position:absolute;；left:" + (table_x + left_width + all_width * (i)/(total_no-1)) + "px;；top:" + (table_y + all_height) + "px;；width:" + (all_width/(total_no-1)) + "px;；height:18px;；z-index:1’〉");；  
document.write("〈v:textbox inset=’0px,0px,0px,0px’〉〈table cellspacing=’3’ cellpadding=’0’ width=’100%’ height=’100%’〉〈tr〉〈td align=’left’〉" + total[0][i] + "〈/td〉〈/tr〉〈/table〉〈/v:textbox〉〈/v:shape〉");；  
}  
var tb_height = 30  
document.write("〈v:rect id=’_x0000_s1025’ style=’position:absolute;；left:" + (table_x + all_width + 20) + "px;；top:" + table_y + "px;；width:100px;；height:" + (line_no * tb_height + 20) + "px;；z-index:1’/〉");；  
for(var i=0;；i〈line_no;；i++)  
{  
document.write("〈v:shape id=’_x0000_s1025’ type=’#_x0000_t202’ alt=’’ style=’position:absolute;；left:" + (table_x + all_width + 25) + "px;；top:" + (table_y + 10+(i) * tb_height) + "px;；width:60px;；height:" + tb_height + "px;；z-index:1’〉");；  
document.write("〈v:textbox inset=’0px,0px,0px,0px’〉〈table cellspacing=’3’ cellpadding=’0’ width=’100%’ height=’100%’〉〈tr〉〈td align=’left’〉" + line_code[i][4] + "〈/td〉〈/tr〉〈/table〉〈/v:textbox〉〈/v:shape〉");；  
document.write("〈v:rect id=’_x0000_s1040’ alt=’’ style=’position:absolute;；left:" + (table_x + all_width + 80) + "px;；top:" + (table_y + 10+(i) * tb_height + 4) + "px;；width:30px;；height:20px;；z-index:1’ fillcolor=’" + line_code[i][0] + "’〉〈v:fill color2=’" + line_code[i][0] + "’ rotate=’t’ focus=’100%’ type=’gradient’/〉〈/v:rect〉");；  
}  
}  
〈/script〉  
〈html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"〉  
〈!--[if !mso]〉  
〈style〉  
v:* { behavior: url(#default#VML) }  
o:* { behavior: url(#default#VML) }  
.shape { behavior: url(#default#VML) }  
〈/style〉  
〈![endif]--〉  
〈head〉  
〈meta http-equiv="Content-Type" content="text/html;； charset=gb2312"〉  
〈title〉〈/title〉  
〈style〉  
TD { FONT-SIZE: 9pt}  
〈/style〉〈/head〉  
〈body topmargin=5 leftmargin=0 scroll=AUTO〉  
〈script language=javascript〉  
var nameArray = new Array();；  
nameArray[0]="中国经营报"  
nameArray[1]="招聘网"  
nameArray[2]="51Job"  
nameArray[3]="新民晚报"  
nameArray[4]="新闻晚报"  
nameArray[5]="南方周末"  
nameArray[6]="羊城晚报"  
var dataArray1 = new Array()  
dataArray1[0]="#FF0000,1.5,1,2,公司1"//参数1线条的颜色，参数2线条的宽度，参数3线条的类型，参数4转折点的类型,参数5线条名称  
dataArray1[1]=200  
dataArray1[2]=1200  
dataArray1[3]=900  
dataArray1[4]=600  
dataArray1[5]=1222  
dataArray1[6]=413  
dataArray1[7]=800  
var dataArray2 = new Array()  
dataArray2[0]="#0000FF,1,2,3,公司2"  
dataArray2[1]=400  
dataArray2[2]=500  
dataArray2[3]=1040  
dataArray2[4]=1600  
dataArray2[5]=522  
dataArray2[6]=813  
dataArray2[7]=980  
var dataArray3 = new Array()  
dataArray3[0]="#004D00,1,1,3,公司3"  
dataArray3[1]=900  
dataArray3[2]=890  
dataArray3[3]=1240  
dataArray3[4]=1300  
dataArray3[5]=722  
dataArray3[6]=833  
dataArray3[7]=1280  
var total = new Array(nameArray,dataArray1,dataArray2,dataArray3)  
table2(total,100,90,600,250,3);；  
〈/script〉  
〈/body〉  
〈/html〉  

==============================  
JavaScript函数之饼图  
----------------------------  
〈script language=javascript〉  
function table3(total,table_x,table_y,all_width,all_height,table_type)  
{  
var tmdColor1 = new Array();；  

tmdColor1[0] = "#d1ffd1";；  
tmdColor1[1] = "#ffbbbb";；  
tmdColor1[2] = "#ffe3bb";；  
tmdColor1[3] = "#cff4f3";；  
tmdColor1[4] = "#d9d9e5";；  
tmdColor1[5] = "#ffc7ab";；  
tmdColor1[6] = "#ecffb7";；  

var tmdColor2 = new Array();；  

tmdColor2[0] = "#00ff00";；  
tmdColor2[1] = "#ff0000";；  
tmdColor2[2] = "#ff9900";；  
tmdColor2[3] = "#33cccc";；  
tmdColor2[4] = "#666699";；  
tmdColor2[5] = "#993300";；  
tmdColor2[6] = "#99cc00";；  

var tb_color = new Array(tmdColor1,tmdColor2);；  
var tb_height = 30;；  
var total_no = total[0].length;；  
var totalpie = 0;；  
for(var i=0;；i〈total_no;；i++)  
{  
totalpie += total[1][i];；  
}  
var PreAngle = 0;；  
for(var i=0;；i〈total_no;；i++)  
{  
document.write("〈v:shape id=’_x0000_s1025’ alt=’’ style=’position:absolute;；left:" + table_x + "px;；top:" + table_y + "px;；width:" + all_width + "px;；height:" + all_height + "px;；z-index:1’ coordsize=’1500,1400’ o:spt=’100’ adj=’0,,0’ path=’m750,700ae750,700,750,700," + parseInt(23592960*PreAngle) + "," + parseInt(23592960*total[1][i]/totalpie) + "xe’ fillcolor=’" + tb_color[0][i] + "’ strokecolor=’#FFFFFF’〉〈v:fill color2=’" + tb_color[1][i] + "’ rotate=’t’ focus=’100%’ type=’gradient’/〉〈v:stroke joinstyle=’round’/〉〈v:formulas/〉〈v:path o:connecttype=’segments’/〉〈/v:shape〉");；  
PreAngle += total[1][i] / totalpie;；  
}  

if(table_type=="A")  
{  
document.write("〈v:rect id=’_x0000_s1025’ style=’position:absolute;；left:" + (table_x + all_width + 20) + "px;；top:" + (table_y + 20) + "px;；width:100px;；height:" + (total_no * tb_height + 20) + "px;；z-index:1’/〉");；  
for(var i=0;；i〈total_no;；i++)  
{  
document.write("〈v:shape id=’_x0000_s1025’ type=’#_x0000_t202’ alt=’’ style=’position:absolute;；left:" + (table_x + all_width + 25) + "px;；top:" + (table_y+30+(i)*tb_height) + "px;；width:60px;；height:" + tb_height + "px;；z-index:1’〉");；  
document.write("〈v:textbox inset=’0px,0px,0px,0px’〉〈table cellspacing=’3’ cellpadding=’0’ width=’100%’ height=’100%’〉〈tr〉〈td align=’left’〉" + total[0][i] + "〈/td〉〈/tr〉〈/table〉〈/v:textbox〉〈/v:shape〉");；  
document.write("〈v:rect id=’_x0000_s1040’ alt=’’ style=’position:absolute;；left:" + (table_x + all_width + 80) + "px;；top:" + (table_y + 30 + (i)*tb_height+3) + "px;；width:30px;；height:20px;；z-index:1’ fillcolor=’" + tb_color[0][i] + "’〉〈v:fill color2=’" + tb_color[1][i] + "’ rotate=’t’ focus=’100%’ type=’gradient’/〉〈/v:rect〉");；  
//显示比例数  
//document.write("〈v:shape id=’_x0000_s1025’ type=’#_x0000_t202’ alt=’’ style=’position:absolute;；left:" + (table_x+all_width+110) + "px;；top:" + (table_y+30+(i)*tb_height) + "px;；width:60px;；height:" + tb_height + "px;；z-index:1’〉");；  
//document.write("〈v:textbox inset=’0px,0px,0px,0px’〉〈table cellspacing=’3’ cellpadding=’0’ width=’100%’ height=’100%’〉〈tr〉〈td align=’left’〉" + Math.round(parseFloat(total[1][i]*100/totalpie)*100)/100 + "%〈/td〉〈/tr〉〈/table〉〈/v:textbox〉〈/v:shape〉");；  
}  
}  

if(table_type == "B")  
{  
var pie = 3.14159265358979;；  
var TempPie = 0;；  
for(var i=0;；i〈total_no;；i++)  
{  
var TempAngle = pie * 2 * (total[1][i] / (totalpie * 2) + TempPie);；  
var x1 = table_x + all_width/2 + Math.cos(TempAngle) * all_width * 3/8;；  
var y1 = table_y + all_height/2 - Math.sin(TempAngle) * all_height * 3/8;；  
var x2 = table_x + all_width/2 + Math.cos(TempAngle) * all_width * 3/4;；  
var y2 = table_y + all_height/2 - Math.sin(TempAngle) * all_height * 3/4;；  

if(x2〉table_x + all_width/2)  
{  
x3 = x2 + 20;；  
x4 = x3;；  
}  
else  
{  
x3 = x2 - 20;；  
x4 = x3 - 100;；  
}  
document.write("〈v:oval id=’_x0000_s1027’ style=’position:absolute;；left:" + (x1 - 2) + "px;；top:" + (y1 - 2) + "px;；width:4px;；height:4px;； z-index:2’ fillcolor=’#111111’ strokecolor=’#111111’/〉");；  
document.write("〈v:line id=’_x0000_s1025’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；z-index:1’ from=’" + x1 + "px," + y1 + "px’ to=’" + x2 + "px," + y2 + "px’ coordsize=’21600,21600’ strokecolor=’#111111’ strokeweight=’1px’〉〈/v:line〉");；  
document.write("〈v:line id=’_x0000_s1025’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；z-index:1’ from=’" + x2 + "px," + y2 + "px’ to=’" + x3 + "px," + y2 + "px’ coordsize=’21600,21600’ strokecolor=’#111111’ strokeweight=’1px’〉〈/v:line〉");；  
document.write("〈v:shape id=’_x0000_s1025’ type=’#_x0000_t202’ alt=’’ style=’position:absolute;；left:" + x4 + "px;；top:" + (y2 - 10) + "px;；width:100px;；height:20px;；z-index:1’〉");；  
document.write("〈v:textbox inset=’0px,0px,0px,0px’〉〈table cellspacing=’3’ cellpadding=’0’ width=’100%’ height=’100%’〉〈tr〉〈td align=’left’〉" + total[0][i] + " " + Math.round(parseFloat(total[1][i] * 100/ totalpie)*100)/100 + "%〈/td〉〈/tr〉〈/table〉〈/v:textbox〉〈/v:shape〉")  
TempPie += total[1][i]/totalpie;；  
}  
}  
}  
〈/script〉  
〈html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"〉  
〈!--[if !mso]〉  
〈style〉  
v:* { behavior: url(#default#VML) }  
o:* { behavior: url(#default#VML) }  
.shape { behavior: url(#default#VML) }  
〈/style〉  
〈![endif]--〉  
〈head〉  
〈meta http-equiv="Content-Type" content="text/html;； charset=gb2312"〉  
〈title〉〈/title〉  
〈style〉  
TD { FONT-SIZE: 9pt}  
〈/style〉〈/head〉  
〈body topmargin=5 leftmargin=0 scroll=AUTO〉  
〈script language=javascript〉  
//=============调用方法=====================  
var dataArray = new Array()  
dataArray[0]=200  
dataArray[1]=1200  
dataArray[2]=900  
dataArray[3]=600  
dataArray[4]=1222  
dataArray[5]=413  
dataArray[6]=800  
var nameArray = new Array()  
nameArray[0]="中国经营报"  
nameArray[1]="招聘网"  
nameArray[2]="51Job"  
nameArray[3]="新民晚报"  
nameArray[4]="新闻晚报"  
nameArray[5]="南方周末"  
nameArray[6]="羊城晚报"  
var total= new Array(nameArray,dataArray)  
table3(total,200,40,250,250,"A");；  
table3(total,300,450,250,250,"B");；  
〈/script〉  
〈/body〉  
〈/html〉  

==================================  
JavaScript函数之柱状图  
--------------------------------  
〈script language=javascript〉  
function table1(total,table_x,table_y,thickness,table_width,all_width,all_height,table_type){  
var tmdColor1 = new Array();；  
tmdColor1[0] = "#d1ffd1";；  
tmdColor1[1] = "#ffbbbb";；  
tmdColor1[2] = "#ffe3bb";；  
tmdColor1[3] = "#cff4f3";；  
tmdColor1[4] = "#d9d9e5";；  
tmdColor1[5] = "#ffc7ab";；  
tmdColor1[6] = "#ecffb7";；  
var tmdColor2 = new Array();；  
tmdColor2[0] = "#00ff00";；  
tmdColor2[1] = "#ff0000";；  
tmdColor2[2] = "#ff9900";；  
tmdColor2[3] = "#33cccc";；  
tmdColor2[4] = "#666699";；  
tmdColor2[5] = "#993300";；  
tmdColor2[6] = "#99cc00";；  
var tb_color = new Array(tmdColor1,tmdColor2);；  
var line_color = "#69f";；  
var left_width = 70;；  
var length = thickness/2;；  
var total_no = total[0].length;；  
var temp1 = 0;；  
var temp2,temp4,temp4;；  
for(var i = 0;；i〈total_no;；i++)  
{  
if(temp1〈total[0][i])  
{  
temp1 = total[0][i];；  
}  
}  
temp1 = parseInt(temp1.toString());；  
if(temp1〉9)  
{  
temp2 = temp1.toString().substr(1,1)  
if(temp2〉4)  
{  
temp3 = (parseInt((temp1/(Math.pow(10,(temp1.toString().length-1)))).toString())+1)*Math.pow(10,(temp1.toString().length-1));；  
}  
else  
{  
temp3 = (parseInt((temp1/(Math.pow(10,(temp1.toString().length-1)))).toString())+0.5)*Math.pow(10,(temp1.toString().length-1));；  
}  
}  
else  
{  
if(temp1〉4)  
temp3 = 10;；  
else  
temp3 = 5;；  
}  
temp4=temp3  
document.write("〈!--[if gte vml 1]〉〈v:rect id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:" + (table_x+left_width) + "px;；top:" + table_y + "px;；width:" + all_width + "px;；height:" + all_height + "px;；z-index:-1’ fillcolor=’#9cf’ stroked=’f’〉〈v:fill rotate=’t’ angle=’-45’ focus=’100%’ type=’gradient’/〉〈/v:rect〉〈![endif]--〉");；  
document.write("〈!--[if gte vml 1]〉〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x+left_width) + "px," + (table_y+all_height) + "px’ to=’" + (table_x+all_width+left_width) + "px," + (table_y+all_height) + "px’/〉〈![endif]--〉");；  
document.write("〈!--[if gte vml 1]〉〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x+left_width) + "px," + table_y + "px’ to=’" + (table_x+left_width) + "px," + (table_y+all_height) + "px’/〉〈![endif]--〉");；  

switch (table_type)  
{  
case "A":  

var table_space = (all_width-table_width*total_no)/total_no;；  
document.write("〈!--[if gte vml 1]〉〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x+left_width+length) + "px,"+ table_y + "px’ to=’" + (table_x+left_width+length) + "px," + (table_y+all_height-length) + "px’ strokecolor=’" + line_color + "’/〉〈![endif]--〉");；  

for(var i=0;；i〈=all_height-1;；i+= all_height/5)  
{  
document.write("〈!--[if gte vml 1]〉〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x+left_width)+ "px," + (table_y+all_height-length-i) + "px’ to=’" + (table_x+left_width+length) + "px," + (table_y+all_height-i) +"px’ strokecolor=’" + line_color + "’/〉〈![endif]--〉");；  
document.write("〈!--[if gte vml 1]〉〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x+left_width+length) + "px," + (table_y+all_height-length-i) + "px’ to=’" + (table_x+all_width+left_width) + "px," + (table_y+all_height-length-i) + "px’ strokecolor=’" + line_color + "’/〉〈![endif]--〉");；  
document.write("〈!--[if gte vml 1]〉〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x+(left_width-15)) + "px," + (table_y+i) + "px’ to=’" + (table_x+left_width) + "px," + (table_y+i) + "px’/〉〈![endif]--〉");；  
document.write("〈!--[if gte vml 1]〉");；  
document.write("〈v:shape id=’_x0000_s1025’ type=’#_x0000_t202’ alt=’’ style=’position:absolute;；left:" + table_x + "px;；top:" + (table_y+i) + "px;；width:" + left_width + "px;；height:18px;；z-index:1’〉");；  
document.write("〈v:textbox inset=’0px,0px,0px,0px’〉〈table cellspacing=’3’ cellpadding=’0’ width=’100%’ height=’100%’〉〈tr〉〈td align=’right’〉" + temp4 + "〈/td〉〈/tr〉〈/table〉〈/v:textbox〉〈/v:shape〉〈![endif]--〉");；  
temp4 = temp4-temp3/5;；  
}  
for(var i=0;；i〈total_no;；i++)  
{  

var temp_space = table_x + left_width + table_space / 2 + table_space * i + table_width * i;；  
document.write("〈v:rect id=’_x0000_s1025’ alt=’’ style=’position:absolute;；left:");；  
document.write(temp_space);；  
document.write("px;；top:");；  
document.write(table_y + all_height * (1 - (total[0][i] / temp3)));；  
document.write("px;；width:" + table_width + "px;；height:" + all_height * (total[0][i] / temp3) + "px;；z-index:1’ fillcolor=’" + tb_color[1][i] + "’〉");；  
document.write("〈v:fill color2=’" + tb_color[0][i] + "’ rotate=’t’ type=’gradient’/〉")  
document.write("〈o:extrusion v:ext=’view’ backdepth=’" + thickness + "pt’ color=’" + tb_color[1][i] + "’ on=’t’/〉");；  
document.write("〈/v:rect〉");；  
document.write("〈v:shape id=’_x0000_s1025’ type=’#_x0000_t202’ alt=’’ style=’position:absolute;；left:" + temp_space + "px;；top:" + (table_y+all_height*(1-(total[0][i]/temp3))-table_width) + "px;；width:" + (table_space+15) + "px;；height:18px;；z-index:1’〉");；  
document.write("〈v:textbox inset=’0px,0px,0px,0px’〉〈table cellspacing=’3’ cellpadding=’0’ width=’100%’ height=’100%’〉〈tr〉〈td align=’center’〉" + total[0][i] + "〈/td〉〈/tr〉〈/table〉〈/v:textbox〉〈/v:shape〉");；  
document.write("〈v:shape id=’_x0000_s1025’ type=’#_x0000_t202’ alt=’’ style=’position:absolute;；left:" + (temp_space-table_space/2) + "px;；top:" + (table_y+all_height+1) + "px;；width:" + (table_space+table_width) + "px;；height:18px;；z-index:1’〉");；  
document.write("〈v:textbox inset=’0px,0px,0px,0px’〉〈table cellspacing=’3’ cellpadding=’0’ width=’100%’ height=’100%’〉〈tr〉〈td align=’center’〉" + total[1][i] + "〈/td〉〈/tr〉〈/table〉〈/v:textbox〉〈/v:shape〉");；  
}  

break;；  
case "B":  
var table_space = (all_height - table_width * total_no) / total_no;；  
document.write("〈!--[if gte vml 1]〉〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x+left_width+length) + "px," + (table_y+all_height-length) + "px’ to=’" + (table_x+left_width+all_width) + "px," + (table_y+all_height-length) + "px’ strokecolor=’" + line_color + "’/〉〈![endif]--〉");；  
temp4 =temp3/5;；  
for(var i=0;；i〈=all_width-1;；i +=all_width/5)  
{  
document.write("〈!--[if gte vml 1]〉〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x+left_width+i) + "px," + (table_y+all_height-length) + "px’ to=’" + (table_x+left_width+length+i) + "px," + (table_y+all_height) + "px’ strokecolor=’" + line_color + "’/〉〈![endif]--〉");；  
document.write("〈!--[if gte vml 1]〉〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x+left_width+length+i) + "px," + (table_y+all_height-length) + "px’ to=’" + (table_x+left_width+length+i) + "px," + table_y + "px’ strokecolor=’" + line_color + "’/〉〈![endif]--〉");；  
document.write("〈!--[if gte vml 1]〉〈v:line id=’_x0000_s1027’ alt=’’ style=’position:absolute;；left:0;；text-align:left;；top:0;；flip:y;；z-index:-1’ from=’" + (table_x+left_width+i+all_width/5) + "px," + (table_y+all_height) + "px’ to=’" + (table_x+left_width+i+all_width/5) + "px," + (table_y+all_height+15) + "px’/〉〈![endif]--〉");；  
document.write("〈!--[if gte vml 1]〉");；  
document.write("〈v:shape id=’_x0000_s1025’ type=’#_x0000_t202’ alt=’’ style=’position:absolute;；left:" + (table_x+left_width+i+all_width/5-left_width) + "px;；top:" + (table_y+all_height) + "px;；width:" + left_width + "px;；height:18px;；z-index:1’〉");；  
document.write("〈v:textbox inset=’0px,0px,0px,0px’〉〈table cellspacing=’3’ cellpadding=’0’ width=’100%’ height=’100%’〉〈tr〉〈td align=’right’〉" + temp4 + "〈/td〉〈/tr〉〈/table〉〈/v:textbox〉〈/v:shape〉〈![endif]--〉");；  
temp4 = temp4 + temp3 / 5;；  
}  

for(var i=0;；i〈total_no;；i++)  
{  
var temp_space = table_space/2 + table_space * i + table_width * i;；  
document.write("〈v:rect id=’_x0000_s1025’ alt=’’ style=’position:absolute;；left:");；  
document.write(table_x + left_width);；  
document.write("px;；top:");；  
document.write(table_y + temp_space);；  
document.write("px;；width:" + all_width * (total[0][i] / temp3) + "px;；height:" + table_width + "px;；z-index:1’ fillcolor=’" + tb_color[1][i] + "’〉");；  
document.write("〈v:fill color2=’" + tb_color[0][i] + "’ rotate=’t’ angle=’-90’ focus=’100%’ type=’gradient’/〉");；  
document.write("〈o:extrusion v:ext=’view’ backdepth=’" + thickness + "pt’ color=’" + tb_color[1][i] + "’ on=’t’/〉");；  
document.write("〈/v:rect〉");；  
document.write("〈v:shape id=’_x0000_s1025’ type=’#_x0000_t202’ alt=’’ style=’position:absolute;；left:" + (table_x + left_width + all_width * (total[0][i] / temp3) + thickness / 2) + "px;；top:" + (table_y + temp_space) + "px;；width:" + (table_space + 15) + "px;；height:18px;；z-index:1’〉");；  
document.write("〈v:textbox inset=’0px,0px,0px,0px’〉〈table cellspacing=’3’ cellpadding=’0’ width=’100%’ height=’100%’〉〈tr〉〈td align=’center’〉" + total[0][i] + "〈/td〉〈/tr〉〈/table〉〈/v:textbox〉〈/v:shape〉");；  

document.write("〈v:shape id=’_x0000_s1025’ type=’#_x0000_t202’ alt=’’ style=’position:absolute;；left:" + table_x + "px;；top:" + (table_y + temp_space) + "px;；width:" + left_width + "px;；height:18px;；z-index:1’〉");；  
document.write("〈v:textbox inset=’0px,0px,0px,0px’〉〈table cellspacing=’3’ cellpadding=’0’ width=’100%’ height=’100%’〉〈tr〉〈td align=’right’〉" + total[1][i] + "〈/td〉〈/tr〉〈/table〉〈/v:textbox〉〈/v:shape〉");；  
}  

}  
}  
〈/script〉  
〈html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"〉  
〈!--[if !mso]〉  
〈style〉  
v:* { behavior: url(#default#VML) }  
o:* { behavior: url(#default#VML) }  
.shape { behavior: url(#default#VML) }  
〈/style〉  
〈![endif]--〉  
〈head〉  
〈meta http-equiv="Content-Type" content="text/html;； charset=gb2312"〉  
〈title〉〈/title〉  
〈style〉  
TD { FONT-SIZE: 9pt}  
〈/style〉〈/head〉  
〈body topmargin=5 leftmargin=0 scroll=AUTO〉  
〈script language=javascript〉  
//=============调用方法=====================  
var dataArray = new Array()  
dataArray[0]=200  
dataArray[1]=800  
dataArray[2]=1000  
dataArray[3]=600  
dataArray[4]=1222  
dataArray[5]=3213  
dataArray[6]=8  
var nameArray = new Array()  
nameArray[0]="中国经营报"  
nameArray[1]="招聘网"  
nameArray[2]="51Job"  
nameArray[3]="新民晚报"  
nameArray[4]="新闻晚报"  
nameArray[5]="南方周末"  
nameArray[6]="羊城晚报"  
var total= new Array(dataArray,nameArray)  
table1(total,200,20,20,30,400,200,"A");；  
table1(total,200,320,20,20,400,250,"B")  
〈/script〉  
〈/body〉  
〈/html〉