[200分求助]求助孟子、阿信等列位高手~~~js执行CPU100%问题~~!!急~~! 在线~~~~~~~

HHH3000 2004-10-13 09:22:09
我改的别人的vml饼图,生成饼图没问题,程序执行也没有错误,可是cpu工作在100%!!!
下面的程序直接粘贴就可以看了,希望大家帮忙!!!!

<SCRIPT LANGUAGE=javascript>
var jsArray=new Array(new Array(),new Array());
jsArray[0][0]='超市1';
jsArray[1][0]='1600';
jsArray[0][1]='超市2';
jsArray[1][1]='9300';
jsArray[0][2]='超市3';
jsArray[1][2]='4700';
jsArray[0][3]='超市4';
jsArray[1][3]='9800';
jsArray[0][4]='超市5';
jsArray[1][4]='2000';
jsArray[0][5]='超市6';
jsArray[1][5]='13400';
jsArray[0][6]='超市7';
jsArray[1][6]='54875';
jsArray[0][7]='超市8';
jsArray[1][7]='3500';
jsArray[0][8]='超市9';
jsArray[1][8]='5600';
jsArray[0][9]='超市10';
jsArray[1][9]='15440';
jsArray[0][10]='超市11';
jsArray[1][10]='3000';
jsArray[0][11]='超市12';
jsArray[1][11]='4200';
jsArray[0][12]='超市13';
jsArray[1][12]='2500';
jsArray[0][13]='超市14';
jsArray[1][13]='13040';
</SCRIPT>

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<html>
<head>
<title>监督点统计数据柱状图</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link rel="stylesheet" href="/Pub/Css/style.css" type="text/css">
<SCRIPT language=JavaScript>
function deal1(name,value,percent){
divDes.style.display="";
divDes.style.left=window.event.x+15;
divDes.style.top=window.event.y;
var strTemp="<table cellspacing='1' cellpadding='5' width='100%' height='100%' border='0' bgColor='#cecfce'><tr bgColor='#ffffE1'><td>"+name+"</td></tr><tr bgColor='#ffffE1'><td>数据:"+ value +"</td></tr><tr bgColor='#ffffE1'><td>所占比例:"+ percent +"%</td></tr></table>";
divDes.innerHTML=name+"\n数据:"+ value +"\n所占比例:"+ percent+"%";
divDes.innerHTML=strTemp;
}
function deal2()
{
divDes.style.display="none";
}
function VMLPie(pContainer,pWidth,pHeight,pCaption){
this.Container=pContainer;
this.Width= pWidth || 300;
this.Height=pHeight || 203;
this.Caption = pCaption || "关键数据图表";
this.backgroundColor="";
this.Shadow=false;
this.BorderWidth=0;
this.BorderColor=null;
this.all=new Array();
this.RandColor=function(){
return "rgb("+ parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255)+")";
}
this.VMLObject=null;
}
VMLPie.prototype.Draw=function(numTableRows,numTableCols){
//画外框
var o=document.createElement("v:group");
o.style.width="100%";
o.style.height="90%";

o.coordsize="21600,21600";
o.style.position="relative";

this.VMLObject=o;
this.Container.appendChild(o);


//开始画内部园
var oOval=document.createElement("v:oval");
oOval.id="oOval";
oOval.style.width="55%";
oOval.style.height="90%";
oOval.style.top="5%";
oOval.style.left="2%";
oOval.fillcolor="#d5dbfb";

o.appendChild(oOval);
this.CreatePie(o,numTableRows,numTableCols);

}
...全文
285 33 打赏 收藏 举报
写回复
33 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
emu_ston 2004-10-14
  • 打赏
  • 举报
回复
--------------------------------------------
littleboys(飞龙) :
this.Container.appendChild(o);
我查了半天,应该是这句话有问题。
--------------------------------------------

呵呵不添这一句,当然就不费cpu了。

其实并不是具体哪一句appendChild有问题,唯一的问题在于appendChild太多了。其实少画几个大饼cpu就降下来了。看来是浏览器在处理vml的时候没有优化。liuruhong画的大饼比较简单,当然没那么费cpu了。
HHH3000 2004-10-14
  • 打赏
  • 举报
回复
感谢楼上所有兄弟的大力支持!!!
结贴!
littleboys 2004-10-14
  • 打赏
  • 举报
回复
找到问题了,测试现在cpu 已经不再是100%了 。
问题应该是表格嵌套问题吧。
把<table width="90%" height="90%" border=0 style="border-width:1px; border-style:solid; border-color:black ">
<tr><td id="imgTd">
</td></tr>
</table>
改成
<div id="imgTd">
</div> 就可以了。
littleboys 2004-10-14
  • 打赏
  • 举报
回复
不同意楼上的说法,即使appendChild 少几个,cpu还是一直据高不下。而 liuruhong(蓝色街灯) 写的程序就没有这个问题。
还应该是程序的问题。
HHH3000 2004-10-13
  • 打赏
  • 举报
回复
已经发过去了,期待佳音~~~
liuruhong 2004-10-13
  • 打赏
  • 举报
回复
给你发消息了,将程序发送到我的信箱,那个源程序我写了有一段日子了,当初似乎是比较闲,闹着玩写的,很久没有看过那个程序了,如果是IE6,我似乎另外提供了一个版本,就是通过xslt来实现的,那样的总体来说会平滑一点,毕竟不需要维护那么多的对象,但是功能肯定有限了
HHH3000 2004-10-13
  • 打赏
  • 举报
回复
哦hohohohohoho ~~~~~
原来是蓝色大哥写的,多谢~~~!!

1。头头指定要用VML,我也目办法。。。再说我对SVG不熟。。。
2。我用的是IE6

再次感谢楼上的所有兄弟~~~
既然原作者都出来了,我也没什么说得了,
反正能凑合用,就先到这里吧~~~!!
明天来结贴。

PS:蓝色大哥如果有时间帮忙看看,我很想知道究竟是什么问题,
用你的源程序就没事,我的就80%,着实郁闷!!
我总觉得是程序问题,谢谢了~!~~!~~!~~!~~;)
liuruhong 2004-10-13
  • 打赏
  • 举报
回复
我是原程序的作者,赫赫;)
具体代码太长,可能我也没有时间帮你做完整调试,给你以下几个个人建议

1。如果是非常复杂的图形,建议不要使用VML,采用SVG或者服务器生成时比较合适的选择

2。VML在IE 5.0或者5.5下面的执行不是很流畅,按照我个人感觉,应该是VML引擎作的不是很好吧,所以建议在IE6.0下面去使用

3。不要使用JavaScript去做大量计算的工作,毕竟那不是它擅长的领域

4。我写程序的时候为了懒惰,采用的是VML DOM,按照目前的感觉来说,VML是比较不成熟的
HHH3000 2004-10-13
  • 打赏
  • 举报
回复
上面的就是原始饼图,看名字可能是思归老大写的~~~
我的是昭他改的,可是就不行了。。。。
还望孟子老大等高手帮忙再看看~~~
HHH3000 2004-10-13
  • 打赏
  • 举报
回复
VMLPie.prototype.Zoom=function (iValue){
var vX=21600;
var vY=21600;
this.VMLObject=document.all(this.id);
this.VMLObject.coordsize=parseInt(vX / iValue) +","+parseInt(vY /iValue);
var texts=this.VMLObject.getElementsByTagName("TEXTBOX");
for(var i=0;i<texts.length;i++){
if (texts[i].preSize){
texts[i].style.fontSize= parseInt(texts[i].preSize) * iValue +"px";
}
else{
texts[i].style.fontSize= 12 * iValue + "px";
}
}
}

/////////////////////////////////////////////////////////////
//接口功能:
// 添加饼图数据
//参数说明:
// sName:数据标签名称
// sValue:数据值
// sTooltipText:数据描述
///////////////////////////////////////////////////////////////
VMLPie.prototype.AddData=function(sName,sValue,sTooltipText){
var oData=new Object();
oData.Name=sName;
oData.Value=sValue;
oData.TooltipText=sTooltipText;
var iCount=this.all.length;
this.all[iCount]=oData;

}
////////////////////////////////////////////////////////////////
//接口功能:
// 清除所有数据
////////////////////////////////////////////////////////////////
VMLPie.prototype.Clear=function(){
this.all.length=0;
}

function HoverPie(el){
var v_length=500;
var x_cur=Math.cos( el._scale * Math.PI /180);
var y_cur=Math.sin (el._scale * Math.PI /180);
x=parseInt(x_cur * v_length);
y=parseInt(y_cur * v_length);
el.style.top=4000 -y;
el.style.left=1000 +x;
el.strokecolor="black";

}
function RestorePie(el){
el.style.top=4000;
el.style.left=1000;
el.strokecolor="white";

}
function LegendMouseOverEvent(){

var eSrc=window.event.srcElement;
var vPie=document.all(eSrc.element);
HoverPie(vPie);
}
function LegendMouseOutEvent(){
var eSrc=window.event.srcElement;
var vPie=document.all(eSrc.element);
RestorePie(vPie);
}
var objPie=null;
//以下是函数调用
function DrawPie(){
objPie=new VMLPie("600px","450px","人口统计图"); //初始化宽度,高度,标题
objPie.BorderWidth=3; //图表边框
objPie.BorderColor="blue"; //图表边框颜色
objPie.Width="800px"; //定义图表宽度
objPie.Height="600px"; //定义图表高度
objPie.backgroundColor="#ffffff"; //定义背景颜色
objPie.Shadow=true; //是否需要阴影 true为是 false为不要阴影
//添加图表数据
//顺序为名称,值,描述
objPie.AddData("北京",50,"北京的人口");
objPie.AddData("上海",52,"上海的固定人口");
objPie.AddData("天津",30,"天津的外地人口");
objPie.AddData("西安",58,"西安城市人口");
objPie.AddData("武汉",30,"武汉的外地人口");
objPie.AddData("重庆",58,"重庆城市人口");
result.innerHTML=objPie.Draw(); //生成VML数据

//alert(document.body.outerHTML);
}


</script>
</head>
<body onload="DrawPie()">
<select id="zoom" onchange="objPie.Zoom(this.value);" NAME="zoom">
<option value="0.2" selected>20%</option>
<option value="0.25">25%</option>
<option value="0.4">40%</option>
<option value="0.5">50%</option>
<option value="0.75">75%</option>
<option value="0.8">80%</option>
<option value="1">原始大小</option>
<option value="1.25">125%</option>
<option value="1.5">150%</option>
<option value="2">200%</option>
<option value="3">300%</option>
<option value="4">400%</option>
</select>
<OBJECT id="MyScroll" title="改变滚动条的值,右边的图片会相应的旋转" height="15" width="100" classid="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D"
VIEWASTEXT>
<PARAM NAME="ForeColor" VALUE="2147483661">
<PARAM NAME="BackColor" VALUE="2147483659">
<PARAM NAME="VariousPropertyBits" VALUE="27">
<PARAM NAME="Size" VALUE="2646;397">
<PARAM NAME="MousePointer" VALUE="16">
<PARAM NAME="Min" VALUE="2">
<PARAM NAME="Max" VALUE="40">
<PARAM NAME="Position" VALUE="10">
<PARAM NAME="PrevEnabled" VALUE="1">
<PARAM NAME="NextEnabled" VALUE="1">
<PARAM NAME="SmallChange" VALUE="1">
<PARAM NAME="LargeChange" VALUE="1">
<PARAM NAME="Orientation" VALUE="1">
<PARAM NAME="ProportionalThumb" VALUE="65535">
<PARAM NAME="Delay" VALUE="50">
</OBJECT>
<SCRIPT LANGUAGE="VBScript">
<!--
Dim R
Set R = document.all("saucer")
Sub MyScroll_Change()
objPie.Zoom(MyScroll.Value /10)
End Sub

-->
</SCRIPT>
<hr style="PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-TOP:0px;HEIGHT:1px"
size="1">
<div id="result"></div>
</body>
</html>
lfecnu 2004-10-13
  • 打赏
  • 举报
回复
顶! 我的cpu也是80%多
HHH3000 2004-10-13
  • 打赏
  • 举报
回复
VMLPie.prototype.Draw=function(){
//画外框
var o=document.createElement("v:group");
o.id=this.id;
o.style.width=this.Width;
o.style.height=this.Height;
o.coordsize="21600,21600";
//添加一个背景层
var vRect=document.createElement("v:rect");
vRect.style.width="21600px"
vRect.style.height="21600px"
o.appendChild(vRect);
//添加标题
var vCaption=document.createElement("v:textbox");
vCaption.style.fontSize="24px";
vCaption.style.height="24px"
vCaption.preSize="24";
vCaption.style.fontWeight="bold";
vCaption.innerHTML=this.Caption;
vCaption.style.textAlign="center";

vRect.appendChild(vCaption);
//设置边框大小
if(this.BorderWidth){
vRect.strokeweight=this.BorderWidth;
}
//设置边框颜色
if(this.BorderColor){
vRect.strokecolor=this.BorderColor;
}
//设置背景颜色
if(this.backgroundColor){
vRect.fillcolor=this.backgroundColor;
}
//设置是否出现阴影
if(this.Shadow){
var vShadow=document.createElement("v:shadow");
vShadow.on="t";
vShadow.type="single";
vShadow.color="graytext";
vShadow.offset="4px,4px";
vRect.appendChild(vShadow);
}
this.VMLObject=o;


//开始画内部园
var oOval=document.createElement("v:oval");
oOval.style.width="15000px";
oOval.style.height="14000px";
oOval.style.top="4000px";
oOval.style.left="1000px";
oOval.fillcolor="#d5dbfb";

//本来计划加入3D的效果,后来感觉确实不好控制,就懒得动手了
//var o3D=document.createElement("o:extrusion");
var formatStyle=' <v:fill rotate="t" angle="-135" focus="100%" type="gradient"/>';
//formatStyle+='<o:extrusion v:ext="view" color="#9cf" on="t" rotationangle="-15"';
//formatStyle+=' viewpoint="0,34.72222mm" viewpointorigin="0,.5" skewangle="105"';
//formatStyle+=' lightposition="0,50000" lightposition2="0,-50000"/>';
formatStyle+='<o:extrusion v:ext="view" backdepth="1in" on="t" viewpoint="0,34.72222mm" viewpointorigin="0,.5" skewangle="90" lightposition="-50000" lightposition2="50000" type="perspective"/>';
oOval.innerHTML=formatStyle;

//o.appendChild(oOval);
this.CreatePie(o);

return o.outerHTML;
//this.Container.appendChild(o); //插入

}
VMLPie.prototype.CreatePie=function(vGroup){
var mX=Math.pow(2,16) * 360;
//这个参数是划图形的关键
//AE x y width height startangle endangle
//x y表示圆心位置
//width height形状的大小
//startangle endangle的计算方法如下
// 2^16 * 度数

var vTotal=0;
var startAngle=0;
var endAngle=0;
var pieAngle=0;
var prePieAngle=0;

//计算数据的总和
for(i=0;i<this.all.length;i++){
vTotal+=this.all[i].Value;
}
//建立图例容器
//这里子元素的left,top或者width都是针对于容器设置的坐标系统而言的
//例如
//图表容器我设置了coordsize为 21600,21600,那么objLengendGroup的位置都是相对于这个坐标系统而言的
//和实际图形显示的大小没有直接关系
var objLegendGroup=document.createElement("v:group");
with(objLegendGroup){
style.left="17000px";
style.top="4000px";
style.width="4000px";
style.height=1400 * this.all.length +"px";
coordsize="21600,21600";
}
//做图例的背景填充并且设置阴影
var objLegendRect=document.createElement("v:rect");
objLegendRect.fillcolor=" #EBF1F9";
objLegendRect.strokeweight=1;
with(objLegendRect){
//设置为21600,21600,就是保证完全覆盖group客户区
style.width="21600px";
style.height="21600px";
}
//对于图例加入阴影
var vShadow=document.createElement("v:shadow");
vShadow.on="t";
vShadow.type="single";
vShadow.color="graytext";
vShadow.offset="4px,4px";
objLegendRect.appendChild(vShadow);

//将其放到图例的容器中
objLegendGroup.appendChild(objLegendRect);

this.LegendObject=objLegendGroup;
vGroup.appendChild(objLegendGroup);


var strAngle="";
for(i=0;i<this.all.length;i++){ //顺序的划出各个饼图
var vPieEl=document.createElement("v:shape");
var vPieId=document.uniqueID;
vPieEl.style.width="15000px";
vPieEl.style.height="14000px";
vPieEl.style.top="4000px";
vPieEl.style.left="1000px";
vPieEl.adj="0,0";
vPieEl.coordsize="1500,1400";
vPieEl.strokecolor="white";
vPieEl.id=vPieId;
/*
if(i==0){
vPieEl.style.zIndex=100;
}
if(i==(this.all.length -1)){
vPieEl.style.zIndex=101;
}
*/
vPieEl.style.zIndex=1;
vPieEl.onmouseover="HoverPie(this)";
vPieEl.onmouseout="RestorePie(this)";
//vPieEl.style.border="1px solid blue";

pieAngle= this.all[i].Value / vTotal;
startAngle+=prePieAngle;
prePieAngle=pieAngle;
endAngle=pieAngle;

//strAngle+=this.all[i].Name +":" +this.all[i].Value+ " Start:"+startAngle +" End:"+ endAngle +"\n";

vPieEl.path="M 750 700 AE 750 700 750 700 " + parseInt(mX * startAngle) +" " + parseInt(mX * endAngle) +" xe";
vPieEl.title=this.all[i].Name +"\n所占比例:"+ endAngle * 100 +"%\n详细描述:" +this.all[i].TooltipText;
vPieEl._scale=parseInt( 360 * (startAngle + endAngle /2));

var objFill=document.createElement("v:fill");
objFill.rotate="t";
objFill.focus="100%";
objFill.type="gradient";
objFill.angle=parseInt( 360 * (startAngle + endAngle /2));
//vPieEl.appendChild(objFill);
//vPieEl.innerHTML="<v:fill color2='#33cccc' rotate='t' focus='100%' type='gradient'/><v:stroke joinstyle='round'/><o:extrusion v:ext='view' backdepth='50px' on='t' rotationangle='80,-20'/><v:formulas/><v:path o:connecttype='segments'/>";

var objTextbox=document.createElement("v:textbox");
//objTextbox.border="1px solid black";
objTextbox.innerHTML=this.all[i].Name +":" + this.all[i].Value;
objTextbox.inset="5px 5px 5px 5px";
objTextbox.style.width="100px";
objTextbox.style.height="20px";
//vPieEl.appendChild(objTextbox);

var vColor=this.RandColor();
vPieEl.fillcolor=vColor; //设置颜色
//开始画图例
//p.innerText=vPieEl.outerHTML;
var colorTip=document.createElement("v:rect");

var iHeight=parseInt(21600 / (this.all.length * 2));
var iWidth=parseInt(iHeight * parseInt(objLegendGroup.style.height) /parseInt(objLegendGroup.style.width) /1.5 );

colorTip.style.height= iHeight;
colorTip.style.width=iWidth;
colorTip.style.top=iHeight * i * 2 + parseInt(iHeight /2);
colorTip.style.left=parseInt(iWidth /2);
colorTip.fillcolor=vColor;
colorTip.element=vPieId;
//colorTip.attachEvent("onmouse",LegendMouseOverEvent);
colorTip.onmouseover="LegendMouseOverEvent()";
colorTip.onmouseout="LegendMouseOutEvent()";

var textTip=document.createElement("v:rect");
textTip.style.top=parseInt(colorTip.style.top)- 500;
textTip.style.left= iWidth * 2;
textTip.innerHTML="<v:textbox style=\"font-size:12px;font-weight:bold\">" + this.all[i].Name +"("+ this.all[i].Value+")</v:textbox>";

objLegendGroup.appendChild(colorTip);
objLegendGroup.appendChild(textTip);

vGroup.appendChild(vPieEl);

}
// result.innerText=objLegendGroup.outerHTML;

}
HHH3000 2004-10-13
  • 打赏
  • 举报
回复
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="ProgId" content="VisualStudio.HTML">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<STYLE> v\:* { BEHAVIOR: url(#default#VML) }
o\:* { BEHAVIOR: url(#default#VML) }
.shape { BEHAVIOR: url(#default#VML) }
</STYLE>
<script language="javascript">
function VMLPie(pWidth,pHeight,pCaption,pContainer){
this.Container=pContainer;
this.Width= pWidth || "400px";
this.Height=pHeight || "250px";
this.Caption = pCaption || "VML Chart";
this.backgroundColor="";
this.Shadow=false;
this.BorderWidth=0;
this.BorderColor=null;
this.all=new Array();
this.id=document.uniqueID;
this.RandColor=function(){

return "rgb("+ parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255)+")";
}
this.VMLObject=null;
this.LegendObject=null;
}
/////////////////////////////////////////////////////////////////////////////////////////////////
//接口功能:
// 开始画图,将图形画到指定的容器上面
/////////////////////////////////////////////////////////////////////////////////////////////////

HHH3000 2004-10-13
  • 打赏
  • 举报
回复
拜托大家观察你们的cpu使用情况,如果开着这个页面,
cpu是不是总是80% 以上~~~!!!
如果有必要我会把另一份饼图贴上来,
你们对比以下就会发现了
孟子E章 2004-10-13
  • 打赏
  • 举报
回复
这个东西就是耗内存的。加内存吧
HHH3000 2004-10-13
  • 打赏
  • 举报
回复
to runmin(阮 - 娶个电脑当老婆 ~.~) :

执行时当然是100%,但是执行完却长期保持80%以上就不正常了,
我有另一份饼图,执行完后只有7%,所以肯定有问题,但不知道怎么回事~~~~
BlueDestiny 2004-10-13
  • 打赏
  • 举报
回复
没问题。
HHH3000 2004-10-13
  • 打赏
  • 举报
回复
谢谢楼上的朋友们,
你们粘贴后,打开任务管理器,
察看cpu使用,若是再80%以上就是不正常的,
我有另外一份饼图,
执行后cpu只有7%,
所以不知道是哪里出了问题,
还请大家仔细看看~~
ps:不可能是配置问题,我的XP1800+,256M
blues-star 2004-10-13
  • 打赏
  • 举报
回复
<script>
var a = ""
for (var i=0; i< 100000; i++)
{
a += "a";
}
alert("end of execution");
</script>

你看看运行这个的时候CPU是多少。
blues-star 2004-10-13
  • 打赏
  • 举报
回复
100%是正常的。
加载更多回复(13)
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2004-10-13 09:22
社区公告
暂无公告