⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 成绩三维报表.htm

📁 三维报表,VML javascript生成3D图表
💻 HTM
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <!--
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃                               ┃
┃ 摘 要: 统计图--饼图                     ┃
┃ 作 者: 无涯                         ┃
┃ 创建日期:2006年02月28日                   ┃
┃ 完成日期:2006年02月28日                   ┃
┃                               ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛	
-->
<HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
	<HEAD>
		<title></title>
		<Meta http-equiv="Refresh" Content="3">
		<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<STYLE> v\:* { Behavior: url(#default#VML) }
	o\:* { behavior: url(#default#VML) }
		</STYLE>
		<SCRIPT LANGUAGE="JavaScript">
		<!--
			var onit=true;
			var num=0;
			var stat_array = new Array();
			
			function moveup(iteam,top,txt,rec)
			{
				temp = eval(iteam);
				tempat = eval(top);
				temptxt = eval(txt);
				temprec = eval(rec);
				at = parseInt(temp.style.top);
				temprec.style.display = ""; 
				if (num > 27)
				{
					temptxt.style.display = "";
				}
				if(at>(tempat-28) && onit)
				{
					num++;
					temp.style.top = at-1;
					Stop=setTimeout("moveup(temp,tempat,temptxt,temprec)",10);
				}
				else
				{
					return;
				} 
			}
			
			function movedown(iteam,top,txt,rec)
			{
				temp = eval(iteam);
				temptxt = eval(txt);
				temprec = eval(rec);
				clearTimeout(Stop);
				temp.style.top = top;
				num = 0;
				temptxt.style.display = "none";
				temprec.style.display = "none";
			}
			
			function ontxt(iteam,top,txt,rec)
			{
				temp = eval(iteam);
				temptxt = eval(txt);
				temprec = eval(rec);
				if (onit)
				{
					temp.style.top = top-28;
					temptxt.style.display = "";
					temprec.style.display = "";
				}
			}
			
			function movereset(over)
			{
				if (over==1)
				{
					onit=false;
				}
				else
				{
					onit=true;
				}
			}
		
			function createXMLHttp()
			{
				var xmlObj;
				if(window.XMLHttpRequest)
				{
					xmlObj = new XMLHttpRequest();
					if(xmlObj.overrideMimeType)
						xmlObj.overrideMimeType('text/xml');
				} 
				else if(window.ActiveXObject)
				{ 
					try
					{
						xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
						return xmlObj;
					}
					catch(e)
					{
						try
						{
							xmlObj = new ActiveXObject("Msxml2.XMLHTTP");
							return xmlObj;
						}
						catch(e)                
						{
							try
							{
								xmlObj=new ActiveXObject("MSXML2.ServerXMLHTTP");
								return xmlObj;
							}
							catch (e)
							{ 
								return false;
							}
						}
					}
				} 
				else 
				{
					return false;
				}
			}
			
			function readFile(url)
			{
				if (createXMLHttp())
				{
					xmlUrl = createXMLHttp();
				}
				xmlUrl.Open("GET",url); 
				xmlUrl.Send();
				while (xmlUrl.readyState == 4)
				{
					return bytes2BSTR(xmlUrl.ResponseBody);
				}
			}

			function table(num,table_left,table_top,all_width,all_height,table_title,unit)
			{
				var allvalues=0;
				var color = new Array();
				var bg_color = new Array(num);
				var pie = new Array(num);

				color[0]="#ff8c19";
				color[1]="#ff1919";
				color[2]="#ffff19";
				color[3]="#1919ff";
				color[4]="#19ff19";
				color[5]="#fc0000";
				color[6]="#3cc000";
				color[7]="#ff19ff";
				color[8]="#993300";
				color[9]="#f60000";
	
				for (i=0,j=0; i<num; i++,j++)
				{
					bg_color[i] = color[j];
					if (j == color.length)
					{
						j = -1;
					}
				}				
				
				for (i=0; i<num; i++)
				{
					allvalues += stat_array[0][i];
				}
				
				var k = 0;
				for (i=0; i<num-1; i++)
				{
					pie[i] = parseInt((stat_array[0][i])/allvalues*10000)/10000;
					k += pie[i];
				}
				pie[num-1] = 1-k;
				
				document.writeln("<v:shapetype id='Cake_3D' coordsize='21600,21600' o:spt='95' adj='11796480,5400' path='al10800,10800@0@0@2@14,10800,10800,10800,10800@3@15xe'></v:shapetype>");
				
				document.writeln("<v:shapetype id='3dtxt' coordsize='21600,21600' o:spt='136' adj='10800' path='m@7,l@8,m@5,21600l@6,21600e'>");
				document.writeln("<v:path textpathok='t' o:connecttype='custom' o:connectlocs='@9,0;@10,10800;@11,21600;@12,10800' o:connectangles='270,180,90,0'/>");
				document.writeln("<v:textpath on='t' fitshape='t'/>");
				document.writeln("<o:lock v:ext='edit' text='t' shapetype='t'/>");
				document.writeln("</v:shapetype>");
				
				document.writeln("<v:rect id='background' style='position:absolute;left:" + table_left + "px;top:" + table_top + "px;WIDTH:" + all_width + "px;HEIGHT:" + all_height + "px;' fillcolor='#EFEFEF' strokecolor='gray'>");
				document.writeln("<v:shadow on='t' type='single' color='silver' offset='4pt,4pt'/>");
				document.writeln("</v:rect>");
				
				document.writeln("<v:group ID='table' style='position:absolute;left:" + table_left + "px;top:" + table_top + "px;WIDTH:" + all_width + "px;HEIGHT:" + all_height + "px;' coordsize = '21000,11500'>");
				document.writeln("<v:Rect style='position:relative;left:500;top:200;width:20000;height:800'filled='false' stroked='false'>");
				document.writeln("<v:TextBox inset='0pt,0pt,0pt,0pt'>");
				document.writeln("<table width='100%' border='0' align='center' cellspacing='0'>");
				document.writeln("<tr>");
				document.writeln("<td align='center' valign='middle'><div style='font-size:15pt; font-family:黑体;'><B>" + table_title + "</B></div></td>");
				document.writeln("</tr>");
				document.writeln("</table>");
				document.writeln("</v:TextBox>");
				document.writeln("</v:Rect> ");
				
				document.writeln("<v:rect id='back' style='position:relative;left:500;top:1000;width:20000; height:10000;' onmouseover='movereset(1)' onmouseout='movereset(0)' fillcolor='#9cf' strokecolor='#888888'>");
				document.writeln("<v:fill rotate='t' angle='-45' focus='100%' type='gradient'/>");
				document.writeln("</v:rect>");
				
				document.writeln("<v:rect id='back' style='position:relative;left:15000;top:1400;width:5000; height:" + ((num+1)*9000/11+200) + ";' fillcolor='#9cf' stroked='t' strokecolor='#0099ff'>");
				document.writeln("<v:fill rotate='t' angle='-175' focus='100%' type='gradient'/>");
				document.writeln("<v:shadow on='t' type='single' color='silver' offset='3pt,3pt'/>");
				document.writeln("</v:rect>");
				
				document.writeln("<v:Rect style='position:relative;left:15500;top:1500;width:4000;height:700' fillcolor='#000000' stroked='f' strokecolor='#000000'>");
				document.writeln("<v:TextBox inset='8pt,4pt,3pt,3pt' style='font-size:11pt;'><div align='left'><font color='#ffffff'><B>总数:" + allvalues + unit + "</B></font></div></v:TextBox>");
				document.writeln("</v:Rect> ");
				
				for (i=0; i<num; i++)
				{
					document.writeln("<v:Rect id='rec" + i + "' style='position:relative;left:15400;top:" + Math.round((i+1)*9000/11+1450) + ";width:4300;height:800;display:none' fillcolor='#efefef' strokecolor='" + bg_color[i] + "'>");
					document.writeln("<v:fill opacity='.6' color2='fill darken(118)' o:opacity2='.6' rotate='t' method='linear sigma' focus='100%' type='gradient'/>");
					document.writeln("</v:Rect>");
					document.writeln("<v:Rect style='position:relative;left:15500;top:" + Math.round((i+1)*9000/11+1500) + ";width:600;height:700' fillcolor='" + bg_color[i] + "' stroked='f'/>");
					document.writeln("<v:Rect style='position:relative;left:16300;top:" + Math.round((i+1)*9000/11+1500) + ";width:3400;height:700' filled='f' stroked='f'>");
					document.writeln("<v:TextBox inset='0pt,5pt,0pt,0pt' style='font-size:9pt;'><div align='left'>" + stat_array[1][i] + ":" + stat_array[0][i] + unit + "</div></v:TextBox>");
					document.writeln("</v:Rect> " );
				}
				
				document.writeln("</v:group>");
				
				var k1 = 180;
				var k4 = 10;
				
				for (i=0; i<num; i++)
				{
					k2 = 360 * pie[i]/2;
					k3 = k1 + k2;
					if (k3 >= 360)
					{
						k3 = k3 - 360;
					}
					kkk = (-11796480 * pie[i] + 5898240);
					k5 = 3.1414926 * 2 * (180-(k3-180))/360;
					R = all_height/2;
					txt_x = table_left + all_height/8-30 + R + R * Math.sin(k5) * 0.7;
					txt_y = table_top + all_height/14-39 + R + R * Math.cos(k5) * 0.7 * 0.5;

					titlestr = "&nbsp;名&nbsp;&nbsp;称:" + stat_array[1][i] + "&#13;&#10;&nbsp;数&nbsp;&nbsp;值:" + stat_array[0][i] + unit + "&#13;&#10;&nbsp;所占比例:" +  pie[i]*100 + "%&nbsp;&nbsp;"
				
					document.writeln("<div style='cursor:hand;'>");
					document.writeln("<v:shape id='cake" + i + "' type='#Cake_3D' title='" + titlestr + "'");
					document.writeln("style='position:absolute;left:" + table_left+all_height/8 + "px;top:" + table_top+all_height/14 + "px;WIDTH:" + all_height + "px;HEIGHT:" + all_height + "px;rotation:" + k3 + ";z-index:" + k4 + "'");
					document.writeln("adj='" + kkk + ",0' fillcolor='" + bg_color[i] + "' onmouseover='moveup(cake" + i + "," + (table_top+all_height/14) + ",txt" + i + ",rec" + i + ")'; onmouseout='movedown(cake" + i + "," + (table_top+all_height/14) + ",txt" + i + ",rec" + i + ");'>");
					document.writeln("<v:fill opacity='60293f' color2='fill lighten(120)' o:opacity2='60293f' rotate='t' angle='-135' method='linear sigma' focus='100%' type='gradient'/>");
					document.writeln("<o:extrusion v:ext='view' on='t'backdepth='25' rotationangle='60' viewpoint='0,0'viewpointorigin='0,0' skewamt='0' lightposition='-50000,-50000' lightposition2='50000'/>");
					document.writeln("</v:shape>");
					document.writeln("<v:shape id='txt" + i + "' type='#3dtxt' style='position:absolute;left:" + txt_x + "px;top:" + txt_y + "px;z-index:20;display:none;width:50; height:18;' fillcolor='#ffffff'");
					document.writeln("onmouseover='ontxt(cake" + i + "," + (table_top+all_height/14) + ",txt" + i + ",rec" + i + ")'>");
					document.writeln("<v:fill opacity='60293f' color2='fill lighten(120)' o:opacity2='60293f' rotate='t' angle='-135' method='linear sigma' focus='100%' type='gradient'/>");
					document.writeln("<v:textpath style='font-family:'宋体';v-text-kern:t' trim='t' fitpath='t' string='" + pie[i]*100 + "%'/>");
					document.writeln("<o:extrusion v:ext='view' backdepth='8pt' on='t' lightposition='0,0' lightposition2='0,0'/>");
					document.writeln("</v:shape>");
					document.writeln("</div>");
					
					k1 = k1+k2*2;
					if (k1 >= 360)
					{
						k1 = k1-360;
					}
					if (k1 > 180)
					{
						k4 = k4+1;
					}
					else
					{
						k4 = k4-1;
					}
				}
			}
			
			function begin(path, width, height, title, unit)
			{
				stat_array[0] = new Array();
				stat_array[1] = new Array();

				var str = readFile(path);
				var strArray = new Array();
				var regExp = /\s+/g;
				var len = 0;
				strArray = str.split(regExp);
				
				for (i=0; i<strArray.length/2; i++)
				{
					stat_array[1][i] = strArray[i*2];
					stat_array[0][i] = parseInt(strArray[i*2+1]);
				}
				if (stat_array[0].length > stat_array[1].length)
				{
					len = stat_array[1].length;
				}							
				else
				{
					len = stat_array[0].length;
				}
				table(len,0,0,width,height,title,unit);
			}
		-->
		</SCRIPT>
		<script language="vbscript"> 
		<!--
			Function bytes2BSTR(vIn) 
				strReturn = "" 
				For i = 1 To LenB(vIn) 
					ThisCharCode = AscB(MidB(vIn,i,1)) 
					If ThisCharCode < &H80 Then 
						strReturn = strReturn & Chr(ThisCharCode) 
					Else 
						NextCharCode = AscB(MidB(vIn,i+1,1)) 
						strReturn = strReturn & Chr(CLng(ThisCharCode) * &H100 + CInt(NextCharCode)) 
						i = i + 1 
					End If 
				Next 
				bytes2BSTR = strReturn 
			End Function 
			-->
		</script>
	</HEAD>
	<body>
		<script language="javascript">
			// 参数说明(数据文件路径,图像宽度,图像高度,图像名称,单位)
			begin('text.txt', 700, 400, '初三(1)班期末成绩三维饼状图', '分');			
		</script>
	</body>
</HTML>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -