请看看，我怎样点击按钮时弹出窗口画图。

Question

//chart.js
var colors = ["#0000FF","#8A2BE2","#A52A2A","#DEB887","#5F9EA0","#7FFF00","#D2691E","#FF7F50",
"#6495ED","#FFF8DC","#DC143C","#00008B","#008B8B","#B8860B","#A9A9A9","#006400","#BDB76B",
"#8B008B","#556B2F","#FF8C00","#9932CC","#8B0000","#E9967A","#8FBC8B","#483D8B","#2F4F4F",
"#00CED1","#9400D3","#FF1493","#00BFFF","#696969","#1E90FF","#B22222","#228B22","#FF00FF",
"#FFD700","#DAA520","#808080","#008000","#ADFF2F","#FF69B4","#CD5C5C","#4B0082","#F0E68C",
"#7CFC00","#FFFACD","#ADD8E6","#F08080","#E0FFFF","#FAFAD2","#90EE90","#D3D3D3","#FFB6C1",
"#FFA07A","#20B2AA","#87CEFA","#778899","#B0C4DE","#FFFFE0","#00FF00","#32CD32","#FAF0E6",
"#FF00FF","#800000","#66CDAA","#0000CD","#BA55D3","#9370DB","#3CB371","#7B68EE","#00FA9A",
"#48D1CC","#C71585","#191970","#F5FFFA","#FFE4E1","#FFE4B5","#FFDEAD","#000080","#FDF5E6",
"#808000","#6B8E23","#FFA500","#FF4500","#DA70D6","#EEE8AA","#98FB98","#AFEEEE","#DB7093",
"#FFEFD5","#FFDAB9","#CD853F","#FFC0CB","#DDA0DD","#B0E0E6","#800080","#FF0000","#BC8F8F",
"#4169E1","#8B4513","#FA8072","#F4A460","#2E8B57","#FFF5EE","#A0522D","#C0C0C0","#87CEEB",
"#6A5ACD","#708090","#FFFAFA","#00FF7F","#4682B4","#D2B48C","#008080","#D8BFD8","#FF6347",
"#40E0D0","#EE82EE","#F5DEB3","#FFFFFF","#F5F5F5","#FFFF00","#9ACD32"]//画线图
//xsa x轴坐标刻度字符窜数组
//yva 线图的值的数组
//ct 线图的标题
var colors = ["#0000FF","#8A2BE2","#A52A2A","#DEB887","#5F9EA0","#7FFF00","#D2691E","#FF7F50"]
function drawpoly(xsa,yva,ct,zoomRate){
if (zoomRate==null) zoomRate=1;
//画布测量单位
var coordx=1000;
var coordy=1000;
//取得最大值
var maxValue=0;
for (var i=0;i<yva.length;i++)
for (var j=0;j<yva[0].length;j++)
if (yva[i][j]>maxValue)
maxValue=yva[i][j];

//取得y轴刻度值rate
var yMaxScore = maxValue*1.12;
var rate = parseInt(Math.exp( parseInt(Math.log(yMaxScore)/Math.LN10)*Math.LN10))/10
var t=parseInt(String(yMaxScore).substring(0,1));
if (t >5) rate *=10;
else if (t>2) rate *=5;
else if (t>1) rate *=4;
else rate *= 2

//x轴分度
var xMaxScore = xsa.length + 1;

//开始画图
var result="";
result += "<center><v:group style='width:400px;height:300px;position:relative;' CoordSize='"+coordx*zoomRate+","+coordy*zoomRate+"'>";

//画布
result += "<v:rect fillcolor='#CCFFFF' style='Z-INDEX:0;width:"+coordx+";height:"+coordy+";position:absolute' strokecolor='white' ></v:rect>";

//x轴
result += "<v:line  from='0,"+coordy+"' to='"+coordx+","+coordy+"'  strokeweight='1pt' style='Z-INDEX:1;position:absolute' ><v:stroke EndArrow='classic'/></v:line>";

//y轴
result += "<v:line  from='0,"+coordy+ " to='0,0' strokeweight='1pt' style='Z-INDEX:1;position:absolute' ><v:stroke EndArrow='classic'/></v:line>";

//刻度
for (var i=yMaxScore;i>0;i-=rate)
{
result += "\t<v:line  from='"+0+","+(i/yMaxScore*coordy)+"' to='10,"+(i/yMaxScore*coordy)+"'  strokeweight='1pt' style='Z-INDEX:1;position:absolute' ></v:line>\n"
result += "<v:rect fillcolor='white' style='Z-INDEX:0;top:"+(i/yMaxScore*coordy-25)+";left:-70;width:70;height:90;position:absolute' strokecolor='white'>"
result += "<v:TextBox inset='0,0,0,0' style='font-size:"+8/zoomRate+"pt;'>"+(yMaxScore-i)+"</v:TextBox></v:rect>"
}
for (var i=0;i<xsa.length;i++)
{
result += "<v:rect fillcolor='white' style='Z-INDEX:0;top:"+(coordy+5)+";left:" +(i/xsa.length*(coordx-1))+";width:"+(coordx/xsa.length)+";height:90;position:absolute' strokecolor='white'>"
result += "<v:TextBox inset='-10,0,0,0' style='font-size:"+8/zoomRate+"pt;TEXT-ALIGN:center'>"+xsa[i]+"</v:TextBox></v:rect>"
}

//画线
var st="";
var sp="";

for (j=0;j<yva.length;j++)
{
st=""
for (i=0;i<yva[j].length;i++)
{
st += parseInt(i/(yva[j].length)*coordx + coordx/(yva[j].length)/2)+","+ parseInt(coordy-yva[j][i]/yMaxScore*coordy)+" ";
sp +="<v:rect title='"+yva[j][i]+"' style='Z-INDEX:0;top:" + parseInt(coordy-yva[j][i]/yMaxScore*coordy-4) + ";left:" + parseInt(i/(yva[j].length)*coordx + coordx/(yva[j].length)/2-4) + ";width:8;height:8;position:absolute'></v:rect>"  //填充fillcolor='" + colors[j] +"'
//sp +="<v:rect title='"+yva[j][i]+"' style='Z-INDEX:1;top:" + parseInt(coordy-yva[j][i]/yMaxScore*coordy) + ";left:" + parseInt(i/(yva[j].length)*coordx + coordx/(yva[j].length)/2-20) + ";width:40;height:"+(coordy-parseInt(coordy-yva[j][i]/yMaxScore*coordy))+";position:absolute' fillcolor='" + colors[j] +"'></v:rect>"
}
result +="<v:PolyLine filled='false' title='"+ct[j]+"' Points= ' "+st+" ' style='position:absolute;' strokecolor='" + colors[j] + "'/>"
result +=sp

//画线标题  
result += "<v:line from='"+(coordx+10)+","+((j+1)*100)+"' to='"+(coordx+60)+","+((j+1)*100)+"' style='Z-INDEX:0;position:absolute' strokecolor='"+colors[j]+"'></v:line>"
result += "<v:rect fillcolor='white' style='Z-INDEX:0;top:"+((j+1)*100-20)+";left:" +(coordx+60)+";width:"+ct[j].length*35+";height:60;position:absolute' strokecolor='white'>"
result += "<v:TextBox inset='0,0,0,0' style='font-size:"+10/zoomRate+"pt;TEXT-ALIGN:left'>"+ct[j]+"</v:TextBox></v:rect>"
}

//结束画图
result +="</v:group></center>";

return result;
}

Answer 1

继续上面的。
function drawpie(xsa,yva,ct)
{
var ar=new Array()
var sum=0;
for (var i=0;i<yva.length;i++)
sum += yva[i];
var maxScale = 360<<16
for (var i=0;i<yva.length;i++)
ar[i]=yva[i]/sum;
var coordsize = 400;
var halfcoordsize = 200;

var result = "<center><v:group style='width:300px;height:300px;top:0'  CoordSize='"+coordsize+","+coordsize+"'>\n";

sum=0;

var st="";
//画饼
for (var i=0;i<ar.length;i++)
{
st= "m "+halfcoordsize+","+halfcoordsize+" ae"+ halfcoordsize+","+ halfcoordsize+","+halfcoordsize+","+halfcoordsize+","+parseInt(sum*maxScale)+","+parseInt( ar[i] * maxScale)+ "xe"; st=  "<v:shape fillcolor='"+colors[i]+"'  coordsize='"+coordsize+","+coordsize+"'  style='width:"+coordsize+"px;height:"+coordsize+"px;  position=absolute' path='"+st+"' Title='"+xsa[i]+":"+parseInt(ar[i]*100+0.5)+"%'/>";
sum += ar[i];
result +=st
}

//画图例
result +="<v:rect style='Z-INDEX:0;top:"+(coordsize+5)+";left:" +((coordsize-ct[0].length*20)/2)+";width:"+(ct[0].length*20)+";height:20;position:absolute' strokecolor='white' fillcolor='white'>"
result +="<v:TextBox inset='0,0,0,0' style='font-size:10.2pt;TEXT-ALIGN:left;'>"+ct[0]+"</v:TextBox></v:rect>"
for (var i=0;i<xsa.length;i++)
{
result += "<v:rect style='Z-INDEX:0;top:"+(i*35+5)+";left:" +(coordsize+50)+";width:30;height:30;position:absolute' strokecolor='white' fillcolor='"+colors[i]+"'></v:rect>"
result += "<v:rect fillcolor='white' style='Z-INDEX:0;top:"+(i*35+5)+";left:" +(coordsize+80)+";width:"+(xsa[i].length*20+50)+";height:30;position:absolute' strokecolor='white'>"
result += "<v:TextBox inset='0,0,0,0' style='font-size:10.2pt;TEXT-ALIGN:left;'>"+xsa[i]+":"+yva[i]+"</v:TextBox></v:rect>"
}
result +="</v:group></center>";
return result;
}
//
function drawpole(xsa,yva,ct,zoomRate)
{
if (zoomRate==null) zoomRate=1;

// 分析数据，获得最大值
var maxValue=0;
for (var i=0;i<yva.length;i++)
for (var j=0;j<yva[0].length;j++)
if (yva[i][j]>maxValue)
maxValue=yva[i][j];

// 分析最大值，取得放大比例rate和坐标轴最大值maxScore yMaxScore = maxValue*1.12;
var rate = parseInt(Math.exp( parseInt(Math.log(yMaxScore)/Math.LN10)*Math.LN10))/10
var t=parseInt(String(yMaxScore).substring(0,1));
 if (t >5) rate *=10;
else if (t>2) rate *=5;
else if (t>1) rate *=4;
else rate *= 2 var xMaxScore = xsa.length;
var tiMax = ct.length+1; // 获得coordsize
coordx = 1000;
coordy = 1000;
var w = coordx/xMaxScore/tiMax //柱子宽度

// 定制绘图区域
var result = "<center><v:group style='width:400px;height:300px;position:relative;'  CoordSize='"+coordx*zoomRate+","+coordy*zoomRate+"'>\n"
//画画布
result += "\t<v:rect  fillcolor='#CCFFFF' style='Z-INDEX:0;width:"+coordx+";height:"+coordy+";position:absolute' strokecolor='white' ></v:rect>\n"

// 画坐标轴
//x轴
result += "\t<v:line  from='0,"+coordy+"' to='"+coordx+","+coordy+"'  strokeweight='1pt' style='Z-INDEX:1;position:absolute' > <v:stroke EndArrow='classic'/></v:line>\n"
//y轴
result += "\t<v:line  from='0,"+coordy+ " to='0,0' strokeweight='1pt' style='Z-INDEX:1;position:absolute' ><v:stroke EndArrow='classic'/></v:line>\n"

//刻度
for (var i=yMaxScore;i>0;i-=rate)
{
result += "\t<v:line  from='"+0+","+(i/yMaxScore*coordy)+"' to='"+10+","+(i/yMaxScore*coordy)+"'  strokeweight='1pt' style='Z-INDEX:0' ></v:line>\n"
result += "<v:rect fillcolor='white' style='Z-INDEX:0;top:"+(i/yMaxScore*coordy-25)+";left:-70;width:70;height:90;position:absolute' strokecolor='white'>"
result += "<v:TextBox inset='0,0,0,0' style='font-size:"+8/zoomRate+"pt;'>"+(yMaxScore-i)+"</v:TextBox></v:rect>"
}
for (var i=0;i<xsa.length;i++)
{
result += "<v:rect fillcolor='white' style='Z-INDEX:0;top:"+(coordy+5)+";left:" +(i/xsa.length*(coordx-1))+";width:"+(coordx/xsa.length)+";height:90;position:absolute' strokecolor='white'>"
result += "<v:TextBox inset='-10,0,0,0' style='font-size:"+8/zoomRate+"pt;TEXT-ALIGN:center'>"+xsa[i]+"</v:TextBox></v:rect>"

//result += "<v:rect  style='Z-INDEX:0;top:"+(coordy+5)+";left:" +i*coordx/xsa.length+";width:"+xsa[i].length*30+";height:90;position:absolute' strokecolor='white'>"
//result += "<v:TextBox inset='0,0,0,0' style='font-size:"+8/zoomRate+"pt;'>"+xsa[i]+"</v:TextBox></v:rect>"
}

//画柱图
for (var i=0;i<yva.length;i++)
{
for (var j=0;j<yva[0].length;j++)
{
var h = (yva[i][j] / yMaxScore)*coordy;//柱子长度
result += "<v:rect style='Z-INDEX:0;width:"+w+";height:"+h+";top:"+(coordy-h)+";left:"+ (j*coordx/yva[0].length+i*w+w/2)+";position:absolute' strokecolor='white' fillcolor='"+colors[i]+"' Title=' "+ct[i]+":"+yva[i][j]+"'></v:rect>\n"
}

//画图例
result += "<v:rect  style='Z-INDEX:0;top:"+(i*100+50)+";left:" +(coordx+30)+";width:30;height:50;position:absolute' strokecolor='white' fillcolor='"+colors[i]+"'></v:rect>"
result += "<v:rect  style='Z-INDEX:0;top:"+(i*100+50)+";left:" +(coordx+60)+";width:"+ct[i].length*40+";height:60;position:absolute' strokecolor='white'fillcolor='white'>"
result += "<v:TextBox inset='0,0,0,0' style='font-size:"+10/zoomRate+"pt;TEXT-ALIGN:left'>"+ct[i]+"</v:TextBox></v:rect>"
}
result +="</v:group></center>"; return result;}

Answer 2

奉劝你还是用层来显示吧，否则打开新窗口的话，传递xStrArr,yValArr,titlArr这几个数组比较麻烦（不过可以用xml来解决，相当于传递xml的字符串）

Answer 3

这个是我写的旧版本chart图
过几天我会贴个新的，功能有些改善

Answer 4

你要用新窗口的话需要改这个函数function drawChart(chartType){
getArr(ro_flag);
if (titlArr.length>0 && xStrArr.length>0 && yValArr.length>0){
if (chartType==1)
return drawpoly(xStrArr,yValArr,titlArr);
if (chartType==2)
return drawpie(xStrArr,yValArr[0],titlArr);
if (chartType==3)
return drawpole(xStrArr,yValArr,titlArr);
}
}然后在子窗口中放个
<div id=showdiv></div>
在onload事件中加入showdiv.innerHTML=opener.drawChart(1)子窗口一定要有下面的
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>testing VML</title>
</head>
<STYLE>
 v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>

Answer 5

感谢：gzh_seagull(不可)的帮助
我照着做了好象不行啊，画不出来。你帮我看看，还差点什么嘛？

Answer 6

父html中修改函数var ctype=1;   //添加全局变量
function drawChart(chartType){
getArr(ro_flag);
if (titlArr.length>0 && xStrArr.length>0 && yValArr.length>0){
if (chartType==1)
return drawpoly(xStrArr,yValArr,titlArr);
if (chartType==2)
return drawpie(xStrArr,yValArr[0],titlArr);
if (chartType==3)
return drawpole(xStrArr,yValArr,titlArr);
}
}
修改按钮代码
<INPUT type="button" value="line" name=button1 onClick="ctype=1;window.open('chartopen.html')">
<INPUT type="button" value="pie" name=button2 onClick="ctype=2;window.open('chartopen.html');">
<INPUT type="button" value="pole" name=button3 onClick="ctype=3;window.open('chartopen.html');">
弹出html(chartopen.html)
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>testing VML</title>
</head>
<STYLE>
 v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
</HEAD><BODY>
<div id=showdiv></div>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
showdiv.innerHTML=opener.window.drawChart(opener.window.ctype);
//-->
</SCRIPT>

Answer 7

大哥谢谢你了。gzh_seagull(不可)；新版本出来后，希望能给我一份，先谢了。

Answer 8

费劲，直接调用graph控件不就行了吗？

Answer 9

看着好眼熟，真的是gzh_seagull(不可)写的吗？在弹出的新窗口中用vml画东西，画完了要记得强行把它的location给reload一下，vml图案才显示得出来。IE的bug就这么多了，没法子。

Answer 10

不全是我写的，我也是在csdn某位大侠写的基础上改的，我后来又写了个新的，明天贴出来