多年前寫這個代碼的時候，網上還沒有其他類似的跨瀏覽器chart實現。后來在國外網站上才開始出現了類似的代碼。
??<HTML>???
??<HEAD>???
??<TITLE>畫圖</TITLE>???
??<meta???http-equiv="Content-Type"???content="text/html;???charset=gb2312">???
??<META???NAME="Generator"???CONTENT="EditPlus">???
??<META???NAME="Author"???CONTENT="emu">???
??<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)]???
??}???
????
??var???dx???=???maxX-minX+1;???
??var???dy???=???maxY-minY+1;???
??if???(dx>dy){???
??lines???=???new???Array(dy);???
??for???(var???i=pointsLength-1;i>-1;i--){???
??var???p0???=???points[i];???
??var???px???=???p0[0];???
??var???y???=???p0[1]-minY;???
??if???(lines[y]){???
??if???(lines[y][0]>px)???//left???point???
??lines[y][0]???=???px;???
??if???(lines[y][1]<px)???//right???point???
??lines[y][1]???=???px;???
??}else{???
??lines[y]=[px,px];???
??}???
??}???
??for???(var???i=dy-1;i>-1;i--){???
??var???left???=???lines[i][0];???
??lines[i]???=?????"<p???class=emuH???style='top:"+(i+minY+y0)+";left:"+(left+x0)+";width:"+(lines[i][1]-left)+";background-color:"+color+"'/>";???
??}???
??}else{???
??lines???=???new???Array(dx);???
??for???(var???i=pointsLength-1;i>-1;i--){???
??var???p0???=???points[i];???
??var???py???=???p0[1];???
??var???x???=???p0[0]-minX;???
??if???(lines[x]){???
??if???(lines[x][0]>py)???//top???point???
??lines[x][0]???=???py;???
??if???(lines[x][1]<py)???//buttom???point???
??lines[x][1]???=???py;???
??}else{???
??lines[x]=[py,py];???
??}???
??}???
??for???(var???i=dx-1;i>-1;i--){???
??var???top???=???lines[i][0];???
??lines[i]???=?????"<p???class=emuW???style='left:"+(i+minX+x0)+";top:"+(top+y0)+";height:"+(lines[i][1]-top)+";background-color:"+color+"'/>";???
??}???
??}???
??return???lines.join("");???
??}???
??function???drawArc(x0,y0,radius,startAngle,endAngle,color,step){???
??if???(step???==???null???||???isNaN(step))???step=1;???
??rs???=???new???Array();???
??tmpar???=???new???Array();???
??startAngle???=???startAngle/180*Math.PI;???
??endAngle???=???endAngle/180*Math.PI;???
??for???(var???i=startAngle;i<endAngle;i+=(step/radius))???
??{???
??var???dx???=???parseInt(Math.sin(i)*radius+x0);???
??var???dy???=???parseInt(Math.cos(i)*radius+y0);???
??rs[rs.length]???=???"<p???class=emuWH???style='top:"+dy+";left:"+dx+";background-color:"+color+"'/>";???
??}???
??return???(rs.join(""));???
??}???
??function???fixTo(s,i){???
??if???(s==null???||???s==""???||???isNaN(s)???||???Math.round(s)==0)???return???0;???
??i???=???Math.round(i);???
??if???(i==0)???return???Math.round(s);???
??if???(i==null???||???isNaN(i)???||???i<0)???i=2;???
??var???v???=???Math.round(s*Math.pow(10,i)).toString();???
??if???(/e/i.test(v))???return???s;???
??return???v.substr(0,v.length-i)+"."+v.substr(v.length-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">???
??<!--???
??function???drawCol(e){???
??var???div1???=???document.getElementById("canvas")???
??var???rows???=???e.parentNode.parentNode.rows;???
??var???cellIndex???=???e.cellIndex;???
??var???data???=???[];???
??for???(var???i=1;i<rows.length;i++){???
??var???d???=???parseInt(rows[i].cells[cellIndex].innerHTML);;???
??if???(isNaN(d)){???
??alert("Invalid???data!");???
??return;???
??}???
??var???color???=???rows[i].bgColor;???
??var???title???=???rows[i].cells[0].innerHTML;???
??data[i-1]???=???[d,color,title]???
??}???
??var???chartTitle???=???outText(250,150+(document.all?5:-10),e.innerHTML+"得分情況對比",15,"blue");???
??div1.innerHTML???=???chartTitle+drawPoleWidthData(data).join("")+drawPieWidthData(data).join("");???
??}???
??function???drawPieWidthData(data){???
??var???sum=0;???
??var???rs???=???new???Array();???
??for???(var???i=0;i<data.length;i++)???sum???+=???data[i][0];???
??var???startAngle???=???0;???
??for???(var???i=0;i<data.length;i++){???
??var???angle???=???data[i][0]/sum*360;???
??rs[i]???=???drawPie(580,250,100,startAngle,startAngle+=angle,data[i][1])???
??}???
??return???rs;???
??}???
??function???drawPoleWidthData(data){???
??var???rs???=???new???Array();???
??var???max???=???0;???
??for???(var???i=0;i<data.length;i++)???if(max<data[i][0])max=data[i][0];???
??for???(var???i=0;i<data.length;i++){???
??rs[rs.length]???=???outText(i*100+140,400+(document.all?5:-10),data[i][2],12,"blue");???
??var???top???=???400-200*data[i][0]/max;???
??rs[rs.length]???=???drawRectangle(i*100+130,top,i*100+170,400,data[i][1],"￥"+fixTo(data[i][0]))???
??}???
??rs[rs.length]=???drawLine(100,400,500,400,"black")???
??rs[rs.length]=???drawLine(100,400,100,150,"black")???
??rs[rs.length]=???drawLine(500,400,490,405,"black")???
??rs[rs.length]=???drawLine(100,150,95,160,"black")???
??rs[rs.length]=???drawLine(500,400,490,395,"black")???
??rs[rs.length]=???drawLine(100,150,105,160,"black")???
??return???rs;???
??}???
??function???drawRow(e){???
??var???div1???=???document.getElementById("canvas")???
??var???row???=???e.parentNode;???
??var???cells???=???row.cells;???
??var???rowIndex???=???row.rowIndex;???
??var???data???=???[];???
??for???(var???i=1;i<cells.length;i++){???
??var???d???=???parseInt(cells[i].innerHTML);;???
??if???(isNaN(d)){???
??alert("Invalid???data!");???
??return;???
??}???
??var???color???=???row.bgColor;???
??var???title???=???row.parentNode.rows[0].cells[i].innerHTML;???
??data[i-1]???=???[d,color,title]???
??}???
??var???chartTitle???=???outText(250,150+(document.all?5:-10),e.innerHTML+"得分情況走向",15,"blue");???
??div1.innerHTML???=???chartTitle+drawLineWidthData(data).join("");???
??}???
??function???drawLineWidthData(data){???
??var???rs???=???new???Array();???
??rs[rs.length]=???drawLine(100,400,770,400,"black")???
??rs[rs.length]=???drawLine(100,400,100,150,"black")???
??rs[rs.length]=???drawLine(770,400,760,405,"black")???
??rs[rs.length]=???drawLine(100,150,95,160,"black")???
??rs[rs.length]=???drawLine(770,400,760,395,"black")???
??rs[rs.length]=???drawLine(100,150,105,160,"black")???
??var???max???=???0;???
??for???(var???i=0;i<data.length;i++)???if(max<data[i][0])max=data[i][0];???
??var???top;???
??for???(var???i=0;i<data.length;i++){???
??rs[rs.length]???=???outText(i*100+140,400+(document.all?5:-10),data[i][2],12,"blue");???
??if???(i>0){???
??rs[rs.length]???=???drawLine(i*100+50,top,i*100+150,(400-200*data[i][0]/max),data[i][1])???
??}???
??top???=???400-200*data[i][0]/max;???
??}???
??return???rs;???
??}???
??//-->???
??</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>???
??<TD???onclick="drawCol(this)"???align=center><A???HREF="javascript:;">第5場</A></TD>???
??<TD???onclick="drawCol(this)"???align=center><A???HREF="javascript:;">第6場</A></TD>???
??<TD???onclick="drawCol(this)"???align=center><A???HREF="javascript:;">第7場</A></TD>???
??</TR>???
??<TR???bgcolor=#CCFFCC>???
??<TD???onclick="drawRow(this)"><A???HREF="javascript:;">二分球</A></TD>???
??<TD>14</TD>???
??<TD>24</TD>???
??<TD>8</TD>???
??<TD>32</TD>???
??<TD>12</TD>???
??<TD>18</TD>???
??<TD>22</TD>???
??</TR>???
??<TR???bgcolor=#CCCCFF>???
??<TD???onclick="drawRow(this)"><A???HREF="javascript:;">三分球</A></TD>???
??<TD>9</TD>???
??<TD>3</TD>???
??<TD>15</TD>???
??<TD>6</TD>???
??<TD>3</TD>???
??<TD>9</TD>???
??<TD>3</TD>???
??</TR>???
??<TR???bgcolor=#FFCCCC>???
??<TD???onclick="drawRow(this)"><A???HREF="javascript:;">罰球</A></TD>???
??<TD>8</TD>???
??<TD>7</TD>???
??<TD>2</TD>???
??<TD>11</TD>???
??<TD>3</TD>???
??<TD>5</TD>???
??<TD>12</TD>???
??</TR>???
??</TABLE>???
??<div???id=canvas></div>???
??</BODY>???
??</HTML>???