emu in blogjava

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  171 随笔 :: 103 文章 :: 1052 评论 :: 2 Trackbacks
多年前写这个代码的时候,网上还没有其他类似的跨浏览器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)+">&nbsp;</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>   
posted on 2007-01-22 20:08 emu 阅读(732) 评论(1)  编辑  收藏 所属分类: DHTML和JAVASCRIPT 技术

评论

# re: 多年前原创的DHTML CHART 2007-05-31 13:16 chenpengyi
的的确确的好东西,收下了。
谢谢啦  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: