再散一贴


test.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>emu's dhtml chart</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" src="emu_draw.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
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);
}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+"&Iuml;ú&Ecirc;&Ucirc;&Ccedil;é&iquest;&ouml;&para;&Ocirc;±&Egrave;",15,"blue");
div1.innerHTML = chartTitle+drawPoleWithData(data).join("")+drawPieWithData(data).join("");
}
function drawPieWithData(data){
var sum=0;
var rs = new Array();
for (var i=data.length-1;i>-1;i--) sum += data[i][0];
for (var t=sum>>1,i=data.length-1;i>-1;i--) 
if (data[i][0]>t){t=data[i];data[i]=data[0];data[0]=t;break;}
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 drawPoleWithData(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],"&pound;¤"+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+"&Iuml;ú&Ecirc;&Ucirc;&Ccedil;é&iquest;&ouml;×&szlig;&Iuml;ò",15,"blue");
div1.innerHTML = chartTitle+drawLineWithData(data).join("");
}
function drawLineWithData(data){
var rs = new Array();
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")
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>&Iuml;ú&Ecirc;&Ucirc;&para;&icirc;</TD>
<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">1&Ocirc;&Acirc;</A></TD>
<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">2&Ocirc;&Acirc;</A></TD>
<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">3&Ocirc;&Acirc;</A></TD>
<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">4&Ocirc;&Acirc;</A></TD>
</TR>
<TR bgcolor=#CCFFCC>
<TD onclick="drawRow(this)"><A HREF="javascript:;">&Otilde;&ucirc;&raquo;ú</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:;">&Iuml;&Ocirc;&Ecirc;&frac34;&AElig;÷</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:;">&Ouml;÷°&aring;</A></TD>
<TD>54358</TD>
<TD>45632</TD>
<TD>44235</TD>
<TD>55843</TD>
</TR>
</TABLE>
<div id=canvas></div>
</BODY>
</HTML>

解决方案 »

  1.   

    :)如果你有一天象我一样在做b/s又希望不受限于微软，也许就会发现它有点用了。至少比netscape上面那个只能画柱图的要强。此外作为学习研究dhtml也应该还算个不错的例子吧？
      

  2.   

    再收……
    看看会不会再有update……
      

  3.   

    呵呵，有人提意见或者报告bug就会有update。
      

  4.   

    可惜csdn不能上传图片。不然就有直观的了。
      

  5.   

    绘图?
    为什么不用vml语言?
      

  6.   

    嘿嘿……在我的ie5.0下面报错。ie版本：5.00.2920.0000
    日文win2000下的自带ie，没有升级过。
      

  7.   

    netvt(网路维他) : 因为vml只有IE支持。walkingpoison(walkingpoison) ：好久不见了哦。我的是IE5.00.3103.1000，英文WIN2000下的自带IE，也没有升级过。你怎么用起日文的系统来啦？！既然报错了，帮我调一下嘛。