搜索
编程论坛 → WEB开发 → 『 JavaScript论坛 』 → [转载]图表生成器 V0.6 beta
标题：[转载]图表生成器 V0.6 beta
只看楼主
zhulei1978
Rank: 16Rank: 16Rank: 16Rank: 16
等　级：版主
威　望：53
帖　子：1351
专家分：1200
注　册：2006-12-17
结帖率：100%
楼主
 问题点数：0 回复次数：2 
[转载]图表生成器 V0.6 beta

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:v><HEAD><TITLE>eTable</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
MARGIN: 0px
}
.style1 {
FONT-WEIGHT: bold; FONT-SIZE: 16px; FILTER: Shadow(Color=#333333, Direction=135)
}
</STYLE>

<SCRIPT language=JavaScript>
var strRowErr="请检查行数!";
var strColErr="请检查列数!";

function checkInt(str){
if(str==null||str==""||isNaN(str)){
return 0;
}else{
str=parseInt(str);
if(str<1){
return 0;
}
}
return str;
}
function checkNum(str){
if(str==null||str==""||isNaN(str)){
return 0;
}
return str;
}

function checkStr(str,def){
if(str==null||str==""){
return(def);
}
return(str);
}
function createTable(){
var intRow=checkInt(row.value);
var intCol=checkInt(col.value);
var i,j;
if(intRow==0){
alert(strRowErr);
row.focus();
return;
}
if(intCol==0){
alert(strColErr);
col.focus();
return;
}
var intTableRow=dataTable.rows.length;
var intTableCol=0;
if(intTableRow!=0){
intTableCol=dataTable.rows(0).cells.length;
}
//alert(intTableRow);
if(intRow+1>intTableRow){
//添加行
for(i=intTableRow;i<intRow+1;i++){
addRow(i,intTableCol);
}
}else{
//删除行
for(i=intTableRow;i>intRow+1;i--){
delRow(i-1);
}
}
intTableRow=intRow+1;
if(intCol+1>intTableCol){
//添加列
for(i=0;i<intTableRow;i++){
for(j=intTableCol;j<intCol+1;j++){
addCell(i,j);
}
}
}else{
//删除列
for(i=0;i<intTableRow;i++){
for(j=intTableCol;j>intCol+1;j--){
delCell(i,j-1);
}
}
}
}

function addRow(rIndex,cols){
dataTable.insertRow(rIndex);
var i;
for(i=0;i<cols;i++){
addCell(rIndex,i)
}
}
function delRow(rIndex){
dataTable.deleteRow(rIndex);
}
function addCell(rIndex,cIndex){
var objCell=dataTable.rows(rIndex).insertCell(cIndex);
var strStyle=(rIndex==0||cIndex==0)?" style='text-align:center;background-color:#f0f0f0;border:none;'":" style='text-align:right;border:none;'"
objCell.bgColor="#ffffff";
objCell.height="21";
objCell.innerHTML="<input type='text' size='8' value='"+rIndex+""+cIndex+"'"+strStyle+" onmouseover='javascript:this.select();'>";
}
function delCell(rIndex,cIndex){
dataTable.rows(rIndex).deleteCell(cIndex);
}
</SCRIPT>

<SCRIPT language=JavaScript>

var ct1=new ct()
function ct(){
this.ac="green,yellow,red,blue,gray,#f7f7f7".split(",")
this.ac="#FF0000,#00FF00,#0000FF,#FFFF00,#00FFFF,#FF00FF,#333333,#666666,#999999,#cccccc".split(",")

this.getCss=function(css,k,df){
if(css==null)
return def==null ? "" : df
var r=new RegExp("(^|)"+k+":([^\;]*)(\;|$)","gi")
var a=r.exec(css.replace(/=/g,":").replace(/ /g,"").toLowerCase())
return a==null ? (df==null ? "" : df) : (isNaN(a[2])||a[2]=="" ? a[2] : parseInt(a[2]))
}

this.bar=function(vList,css){
//柱状图
var l="",a,n,s,hsz,max=0,cx=20,ch
var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300)
if(ph<150||pw<150){
alert("图表区域太小，中断输出！")
return
}
a=vList.split(";")
for(var i in a){
a[i]=a[i].split(",")
for(var j in a[i]){
if(i>0&&j>0)
if(parseInt(a[i][j])>max)
max=parseInt(a[i][j])
}
}
if(max==0)
return
hsz=(ph-100)/max
n=(vList.length-vList.replace(/;/g,"").replace(/,/g,"").length)*20+20
if(pw<n)
pw=n
l+="<v:rect fillcolor='"+this.getCss(css,"background","white")+"' style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'><v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /></v:rect>"
l+="<v:line from="+30+","+(ph-30)+" to="+30+","+10+"><v:stroke startarrow=none endarrow=classic /></v:line>"
l+="<v:line from="+30+","+(ph-30)+" to="+(pw-10)+","+(ph-30)+"><v:stroke startarrow=none endarrow=classic /></v:line>"
l+="<span style='position:absolute;z-index:3;font:12;left:220;top:10'>"+this.getCss(css,"title")+"</span>"
l+="<span style='position:absolute;z-index:3;font:12;left:"+(pw-50)+";top:"+(ph-20)+"'>"+a[0][0]+"</span>"
l+="<span style='position:absolute;z-index:3;font:12;left:10;top:10;width:5;word-break:break-all'>"+this.getCss(css,"vname")+"</span>"

for(i=0;i<5;i++){
l+="<v:line from="+30+","+(70+i*(ph-100)/5)+" to="+(pw-10)+","+(70+i*(ph-100)/5)+" strokecolor=#c0c0c0><v:stroke dashstyle=dash /></v:line>"
l+="<span style='position:absolute;z-index:3;font:12;left:"+10+";top:"+(65+i*(ph-100)/5)+"'>"+(parseInt(max)*(5-i)/5)+"</span>"
}

for(i in a){
for(j in a[i]){
if(i==0){
if(j>0){
l+="<v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' />"
l+="<span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a[i][j]+"</span>"
}
}
else{
if(j==0)
l+="<span style='position:absolute;z-index:3;font:12;left:"+cx+";top:"+(ph-25)+"'>"+a[i][j]+"</span>"
else{
ch=a[i][j]*hsz
l+="<v:rect title='"+a[i][j]+"' fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+cx+";top:"+(ph-30-ch)+";width:20;height:"+ch+"' />"
if(this.getCss(css,"showVal")=="t")
l+="<span style='position:absolute;z-index:3;font:12;left:"+(cx+3)+";top:"+(ph-42-ch)+"'>"+a[i][j]+"</span>"
cx+=20
}
}
}
cx+=20
}
return l
}

this.lines=function(vList,css){
//线图
var l="",a,n,s,hsz,max=0,ch
var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300)
if(ph<150||pw<150){
alert("图表区域太小，中断输出！")
return
}
a=vList.split(";")
for(var i in a){
a[i]=a[i].split(",")
for(var j in a[i]){
if(i>0&&j>0)
if(parseInt(a[i][j])>max)
max=parseInt(a[i][j])
}
}
if(max==0)
return
hsz=(ph-100)/max //
n=a.length*40+40 //
if(pw<n)
pw=n //
l+="<v:rect fillcolor='"+this.getCss(css,"background","white")+"' style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'><v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /></v:rect>"//背景
l+="<v:line from="+30+","+(ph-30)+" to="+30+","+10+"><v:stroke startarrow=none endarrow=classic /></v:line>"//y轴
l+="<v:line from="+30+","+(ph-30)+" to="+(pw-10)+","+(ph-30)+"><v:stroke startarrow=none endarrow=classic /></v:line>"//x轴
l+="<span style='position:absolute;z-index:3;font:12;left:"+(pw-50)+";top:"+(ph-20)+"'>"+this.getCss(css,"xname")+"</span>"//x轴名称
l+="<span style='position:absolute;z-index:3;font:12;left:10;top:10;width:5;word-break:break-all'>"+a[0][0]+"</span>"//y轴名称
l+="<span style='position:absolute;z-index:3;font:12;left:220;top:10'>"+this.getCss(css,"title")+"</span>"//报表标题

for(i=0;i<5;i++){
l+="<v:line from="+30+","+(70+i*(ph-100)/5)+" to="+(pw-10)+","+(70+i*(ph-100)/5)+" strokecolor=#c0c0c0><v:stroke dashstyle=dash /></v:line>"//y轴辅助坐标线
l+="<span style='position:absolute;z-index:3;font:12;left:"+10+";top:"+(65+i*(ph-100)/5)+"'>"+(parseInt(max)*(5-i)/5)+"</span>"//y轴刻度
}

for(i in a){
for(j in a[i]){
if(i==0){
if(j>0){
l+="<v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' />"//图例
l+="<span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a[i][j]+"</span>"//图例说明
}
}
else{//数据
if(j==0)
l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*40)+";top:"+(ph-25)+"'>"+a[i][j]+"</span>"//x轴刻度
else{
ch=a[i][j]*hsz
if(i>1){
oh=parseInt(a[i-1][j]*hsz)
l+="<v:line from="+((i-1)*40)+","+(ph-oh-30)+" to="+(i*40)+","+(ph-ch-30)+" strokecolor='"+this.ac[j-1]+"' />"//数据折线
}
//////////////////////
if(j==1){
l+="<v:line from="+(i*40)+","+(ph-30)+" to="+(i*40)+","+10+" strokecolor=#c0c0c0><v:stroke dashstyle=dash /></v:line>"
}//x轴辅助线
/////////////////////
l+="<v:rect title='"+a[i][j]+"' fillcolor='"+this.ac[j-1]+"' style='z-index:3;position:absolute;left:"+(i*40-1)+";top:"+(ph-ch-31)+";width:3;height:"+3+"' />"//数据点
if(this.getCss(css,"showVal")=="t")
l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*40-5)+";top:"+(ph-ch-42)+"'>"+a[i][j]+"</span>"//数据值
}
}
}
}
return l

}

this.pie=function(vList,css){
var l="",a,i,j,n,s,amt,dx=0
var pw=this.getCss(css,"width",500),ph=this.getCss(css,"height",300)
if(ph<150||pw<150){
alert("图表区域太小，中断输出！")
return
}
a=vList.split(";")
n=a.length*170-130
if(pw<n)
pw=n
l+="<v:rect fillcolor='"+this.getCss(css,"background","white")+"' style='position:absolute;left:0;top:0;width:"+pw+";height:"+ph+"'><v:shadow on=t type=emboss opacity=80% offset='3px,3px' offset2='5px,5px' /></v:rect>"
l+="<span style='position:absolute;z-index:3;font:12;left:220;top:10'>"+this.getCss(css,"title")+"</span>"
if(a.length==2)
dx=pw/2-100
if(a.length==3)
dx=pw/2-180
for(i in a){
a[i]=a[i].split(",")
amt=0
for(j=1;j<a[i].length;j++){
amt+=parseFloat(a[i][j])
}
sa=0
for(j in a[i]){
if(i==0){
if(j>0){
l+="<v:rect fillcolor='"+this.ac[j-1]+"' style='position:absolute;left:"+(j*80-20)+";top:30;width:20;height:20' />"
l+="<span style='position:absolute;z-index:3;font:12;left:"+(j*80+5)+";top:35'>"+a[i][j]+"</span>"
}
}
else{
if(j==0){
l+="<span style='position:absolute;z-index:3;font:12;left:"+(i*170-90+dx)+";top:"+(ph-50)+"'>"+a[i][j]+"("+amt+")</span>"
}
else{
ea=a[i][j]*360/amt+sa
if(j==a[i].length-1)
ea=0
if(a[i][j]>0)
l+=this.getPie(60,sa,ea,"title:"+a[i][j]+";val:"+(parseInt((10000*a[i][j]/amt))/100)+"%;x:"+(i*170-70+dx)+";y:"+(ph/2+10)+";background:"+this.ac[j-1])
sa=ea
}
}
}
}
return l
}

this.getPie=function(r,sa,ea,css){
var sf,ef,sx,sy,ex,ey
var title=this.getCss(css,"title"),val=this.getCss(css,"val")
var x=parseInt(this.getCss(css,"x",0)),y=parseInt(this.getCss(css,"y",0))
sf=Math.PI*(sa/180)
ef=Math.PI*(ea/180)
sy=parseInt(r*Math.sin(sf))
sx=parseInt(r*Math.cos(sf))
ey=parseInt(r*Math.sin(ef))
ex=parseInt(r*Math.cos(ef))

s="m0,0l"+sx+","+sy+"ar-"+r+",-"+r+","+r+","+r+","+ex+","+ey+","+sx+","+sy+",l0,0xe"
l="<v:shape path='"+s+"' title='"+title+"' coordsize=1,1 style='position:absolute;width:1;height:1;left:"+this.getCss(css,"x","0")+";top:"+this.getCss(css,"y","0")+"' fillcolor='"+this.getCss(css,"background","white")+"' />"
if(ef==0)
ef=270
var cx=(r+10)*Math.cos((sf+ef)/2),cy=(r+10)*Math.sin((sf+ef)/2)
l+="<span style='position:absolute;z-index:3;font:12;left:"+(cx+x-10)+";top:"+(cy+y-5)+"'>"+val+"</span>"
return l
}

this.draw=function(vList,css){
var l,type=this.getCss(css,"type")
if(type=="pie")
l=this.pie(vList,css)
else if(type=="lines")
l=this.lines(vList,css)
else
l=this.bar(vList,css)
return l
}
}


function createView(flag){
var i,j;
var strTableName=tableName.value==""?"数据图表":tableName.value;
var strXName=xName.value==""?"X轴":xName.value;
var strYName=yName.value==""?"Y轴":yName.value;
var intTableRow=dataTable.rows.length;
var intTableCol=dataTable.rows(0).cells.length;
var arrData=new Array();
for(i=0;i<intTableCol;i++){
arrData[i]="";
}

var strPara="";
var strStyle="";
arrData[0]=","+strXName;
for(i=0;i<intTableRow;i++){
if(i!=0){
arrData[0]+=",";
arrData[0]+=checkStr(dataTable.rows(i).cells(0).children(0).value,"项目"+i);
}
for(j=1;j<intTableCol;j++){
arrData[j]+=",";
if (i==0){
arrData[j]+=checkStr(dataTable.rows(i).cells(j).children(0).value,j);
}else{
arrData[j]+=checkNum(dataTable.rows(i).cells(j).children(0).value);
}
}
}

strPara=arrData[0].substr(1);
for(i=1;i<intTableCol;i++){
strPara+=";";
strPara+=arrData[i].substr(1);
}
strStyle="type:"+flag+";showVal:t;vname:"+strYName+";title:"+strTableName;

try{
var win=window.open("","sx1123","resizable=yes,scrollbars=yes");
var strHTML="";
strHTML+="<html xmlns:v><style>v\\:*{behavior:url(#default#VML)}</style>";
strHTML+="<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>";
strHTML+=ct1.draw(strPara,strStyle);
strHTML+="</body></html>";
win.document.open();
win.document.write(strHTML);
win.document.close();
win.focus();
}catch(e){
msg.innerHTML="<font color='#ff0000'>装载数据失败!</font>";
}
}
</SCRIPT>

<META content="MSHTML 6.00.2900.3132" name=GENERATOR></HEAD>
<BODY>
<DIV id=msg align=center></DIV>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=left
border=0>
<TBODY>
<TR>
<TD align=left bgColor=#cccccc height=50>&nbsp;&nbsp;&nbsp;&nbsp;<FONT
style="FILTER: shadow(color=#f7f7f7,direction=135); HEIGHT: 24px"
color=#000000 size=6><B>图表生成器</B></FONT> V0.6 beta </TD></TR>
<TR>
<TD align=left bgColor=#f7f7f7 height=25>报表数据行数<INPUT
onmouseover=javascript:this.select(); style="TEXT-ALIGN: center" size=4
value=1 name=row> 报表数据列数<INPUT onmouseover=javascript:this.select();
style="TEXT-ALIGN: center" size=4 value=1 name=col> <INPUT onclick=javascript:createTable(); type=button value=报表生成 name=bt1>
</TD></TR>
<TR>
<TD align=middle><INPUT onmouseover=javascript:this.select();
style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; WIDTH: 100%; BORDER-BOTTOM: medium none; TEXT-ALIGN: center"
value=图表名称 name=tableName>
<TABLE id=dataTable cellSpacing=1 cellPadding=1 align=center
bgColor=#000000 border=0>
<TBODY>
<TR>
<TD align=middle bgColor=#f0f0f0 height=21>&nbsp;</TD>
<TD bgColor=#ffffff height=21><INPUT
onmouseover=javascript:this.select();
style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; BACKGROUND-COLOR: #f0f0f0; TEXT-ALIGN: center"
size=8 value=01></TD></TR>
<TR>
<TD bgColor=#ffffff height=21><INPUT
onmouseover=javascript:this.select();
style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; BACKGROUND-COLOR: #f0f0f0; TEXT-ALIGN: center"
size=8 value=10></TD>
<TD bgColor=#ffffff height=21><INPUT
onmouseover=javascript:this.select();
style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; TEXT-ALIGN: right"
size=8 value=11></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD align=middle bgColor=#999999 height=50><BR>X轴<INPUT
onmouseover=javascript:this.select(); style="TEXT-ALIGN: center" size=10
value=x轴 name=xName>&nbsp;&nbsp; y轴<INPUT
onmouseover=javascript:this.select(); style="TEXT-ALIGN: center" size=10
value=y轴 name=yName><BR><INPUT onclick="javascript:createView('bar');" type=button value=柱状图生成 name=bt1>&nbsp;&nbsp;
<INPUT onclick="javascript:createView('lines');" type=button value=折线图生成 name=bt1>&nbsp;&nbsp;
<INPUT onclick="javascript:createView('pie');" type=button value=饼图生成 name=bt1>
</TD></TR></TBODY></TABLE></BODY></HTML>

[此贴子已经被作者于2007-7-21 10:06:25编辑过]

搜索更多相关主题的帖子: 生成器　beta　图表　
2007-07-21 10:04
zhulei1978
Rank: 16Rank: 16Rank: 16Rank: 16
等　级：版主
威　望：53
帖　子：1351
专家分：1200
注　册：2006-12-17
第 2 楼
 得分:0 
贴在代码框里出错，现把原文件传上来
meHXN7Jf.txt (18.8 KB) [转载]图表生成器 V0.6 beta


下载后把后缀名改为htm

[此贴子已经被作者于2007-7-21 13:30:28编辑过]


其实我就是改变社会风气，提高少女素质，刺激电影市道，提高年轻人内涵，玉树临风，风度翩翩的整蛊专家，我名叫古晶，英文名叫JingKoo！
2007-07-21 10:10
lmhllr
Rank: 8Rank: 8
等　级：贵宾
威　望：44
帖　子：1504
专家分：42
注　册：2005-5-12
第 3 楼
 得分:0 
棒！！加分！
2007-07-23 09:47



参与讨论请移步原网站贴子：https://bbs.bccn.net/thread-157001-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有，并保留所有权利。
Powered by Discuz, Processed in 0.557312 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved