用層畫圖_綜合其它特效

用層畫圖,您可以先修改部分代碼再運行.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>emu's dhtml chart－模板無憂www.zhaotila.cn</TITLE>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312">
<META NAME="Generator" CONTENT="EditPlus">
<meta name="author" content="http://www.zhaotila.cn/"/>
<META NAME="Keywords" CONTENT="chart javascript">
<META NAME="Description" CONTENT="emu's dhtml chart">
<SCRIPT LANGUAGE="JavaScript">
<!--
function drawLine(x0,y0,x1,y1,color){
	var rs = "";
	if (y0 == y1)  //畫橫線
		{
		if (x0>x1){var t=x0;x0=x1;x1=t}  
		rs = "<p class=emuH style='top:"+y0+";left:"+x0+";background-color:"+color+"; width:"+Math.abs(x1-x0)+"'/>";
		}
	else if (x0 == x1)  //畫豎線
		{
		if (y0>y1){var t=y0;y0=y1;y1=t} 
		rs = "<p class=emuW style='top:"+y0+";left:"+x0+";background-color:"+color+";height:"+Math.abs(y1-y0)+"'/>";
		}
	else
		{
		var lx = x1-x0
		var ly = y1-y0
		var l = Math.sqrt(lx*lx+ly*ly)
		rs = new Array();
		for (var i=0;i<l;i+=1)
			{
			var p = i/l;
			var px = parseInt(x0 + lx*p);
			var py = parseInt(y0 + ly*p);
			rs[rs.length] = "<p class=emuWH style='top:"+py+";left:"+px+";background-color:"+color+"'/>";
			}
		rs = rs.join("");
		}
	return rs
}
function drawRectangle(x0,y0,x1,y1,color,title)
	{
	if (x0 == x1 || y0 == y1) return;
	if (x0>x1) {var t=x0;x0=x1;x1=t}
	if (y0>y1) {var t=y0;y0=y1;y1=t}
	return "<table style='top:"+y0+";left:"+x0+";position:absolute' title="+title+"><td bgcolor="+color+" width="+(x1-x0)+" height="+(y1-y0)+"> </td></table>";
	}
function outText(x0,y0,text,fontSize,color){
	return "<p style='top:"+y0+";left:"+x0+";position:absolute;color:"+color+";font-size:"+fontSize+"'>"+text+"</p>";
}
var points = new Array(1000);
function drawPie(x0,y0,radius,startAngle,endAngle,color){
	if (points.length<radius<<2) points.length=radius<<2;
	var startAngle = startAngle*Math.PI/180;
	var endAngle = endAngle*Math.PI/180;
	var maxX=0,maxY=0,minX=0,minY=0;
	var pointsLength = 0;
	var lines ;
	// get arc points
	var step = 1/radius;
	for (var i=startAngle;i<endAngle;i+=step){
		var x = Math.round(Math.sin(i)*radius);
		var y = Math.round(Math.cos(i)*radius)
		points[pointsLength++]=[x,y];
		if (maxX<x) maxX=x;
		if (minX>x) minX=x;
		if (maxY<y) maxY=y;
		if (minY>y) minY=y;
	}

// get radius points
	var dx1=Math.sin(startAngle)*radius;
	var dy1=Math.cos(startAngle)*radius;
	var dx2=Math.sin(endAngle)*radius;
	var dy2=Math.cos(endAngle)*radius;
	var L = Math.sqrt(dx1*dx1+dy1*dy1);
	var stepx1 = dx1/L , stepy1 = dy1/L ,stepx2 = dx2/L , stepy2 = dy2/L ;
	for (var i=0;i<L;i+=.99){
		points[pointsLength++] = [Math.round(stepx1*i),Math.round(stepy1*i)]
		points[pointsLength++] = [Math.round(stepx2*i),Math.round(stepy2*i)]
	}

//-->
</SCRIPT>
<style>
.emuW{position:absolute;font-size:1px;width:1}
.emuH{position:absolute;font-size:1px;height:1}
.emuWH{position:absolute;font-size:1px;width:1;height:1}
A{text-decoration:none;color:#FF66FF}
</style>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<TABLE bgcolor=black cellspacing=1>
	<TR bgcolor=#FFFFCC>
		<TD>銷售額</TD>
		<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">1月</A></TD>
		<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">2月</A></TD>
		<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">3月</A></TD>
		<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">4月</A></TD>
	</TR>
	<TR bgcolor=#CCFFCC>
		<TD onclick="drawRow(this)"><A HREF="javascript:;">整機</A></TD>
		<TD>112535</TD>
		<TD>152430</TD>
		<TD>214235</TD>
		<TD>182240</TD>
	</TR>
	<TR bgcolor=#CCCCFF>
		<TD onclick="drawRow(this)"><A HREF="javascript:;">顯示器</A></TD>
		<TD>76230</TD>
		<TD>70549</TD>
		<TD>68452</TD>
		<TD>83653</TD>
	</TR>
	<TR bgcolor=#FFCCCC>
		<TD onclick="drawRow(this)"><A HREF="javascript:;">主板</A></TD>
		<TD>54358</TD>
		<TD>45632</TD>
		<TD>44235</TD>
		<TD>55843</TD>
	</TR>
</TABLE>
<div   class="gjz2ou1"   id=canvas></div>
</BODY>
</HTML>

所屬頻道：綜合其它特效/更新時間：2012-12-30

[收藏][報錯][返回列表]

相關綜合其它特效：

用層畫圖_綜合其它特效

綜合其它特效Rss訂閱特效代碼搜索

綜合其它特效推薦

猜你也喜歡看這些