VMLPie.prototype.CreatePie=function(vGroup,numTableRows,numTableCols){
var div1=document.createElement("div");
div1.style.width="40%";
div1.style.display="none";
div1.style.position="relative";
div1.style.zIndex=10000;
div1.id="divDes"
vGroup.appendChild(div1);
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 proportionValue=0;
var pieAngle=0;
var prePieAngle=0;
var objRow=null;
var objCell=null;
for(i=0;i<this.all.length;i++){
vTotal+=Math.abs(this.all[i].Value);
} var objLegendRect=document.createElement("v:rect"); //创建一个矩形元素
var objLegendTable=document.createElement("table"); //创建一个table元素
objLegendTable.cellPadding=5;
objLegendTable.cellSpacing=10;
objLegendTable.border=0; objLegendTable.width="100%";
objLegendTable.height="100%";
with(objLegendRect){
style.left="60%"; //右边表格距左多少
style.top="30%"; //右边表格距上多少
style.width="38%"; //表格宽度
style.height="40%"; //表格高度
fillcolor="#e6e6e6";
strokeweight="1px";
} var vTextbox=document.createElement("v:textbox");
vTextbox.appendChild(objLegendTable);
objLegendRect.appendChild(objLegendTable);
var vShadow=document.createElement("v:shadow");
vShadow.on="t";
vShadow.type="single";
vShadow.color="graytext";
vShadow.offset="2px,2px";
objLegendRect.appendChild(vShadow); vGroup.appendChild(objLegendRect);
var strAngle="";
for(i=0;i<this.all.length;i++){ //顺序的画出各个饼图 var vPieEl=document.createElement("v:shape");
var vPieId=document.uniqueID;
vPieEl.id="pie" + i.toString();
vPieEl.style.width="55%";
vPieEl.style.height="90%";
vPieEl.style.top="5%";
vPieEl.style.left="2%";
vPieEl.style.position="relative";
vPieEl.coordsize="1500,1400";
vPieEl.strokecolor="white";
vPieEl.id=vPieId;
pieAngle= Math.abs(this.all[i].Value) / vTotal;
startAngle+=prePieAngle;
prePieAngle=pieAngle;
endAngle=pieAngle; strAngle+=this.all[i].Name +":" +Math.abs(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";
if ((parseFloat(endAngle * 100)).toString().indexOf(".") != -1) {
proportionValue = (parseFloat(endAngle * 100)).toString().split(".")[0] + "." + (parseFloat(endAngle * 100)).toString().split(".")[1].substr(0,2);
}
else {
proportionValue = parseFloat(endAngle * 100);
} var name1=this.all[i].Name;
var value1=this.all[i].Value;
vPieEl.attachEvent('onmouseover',new Function("deal1('"+name1+"','"+value1+"','"+proportionValue+"')"));
vPieEl.attachEvent('onmouseout',deal2);
vPieEl.innerHTML='<v:fill rotate="t" angle="-135" focus="100%" />';
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);
var vColor=this.RandColor();
vPieEl.fillcolor=vColor; //设置颜色
//开始画图例---- 右边的信息列表
if (parseInt(i / (numTableRows - 1)) != 0) {
var objColor=objLegendTable.rows(i%(numTableRows - 1)).insertCell();//颜色标记
objColor.style.backgroundColor=vColor;
objColor.style.width="16px";
objColor.noWrap=true;
objColor.PieElement=vPieId;
var objCell=objLegendTable.rows(i%(numTableRows - 1)).insertCell();//颜色标记
objCell.style.font="icon";
objCell.style.padding="0px";
objCell.noWrap=true;
objCell.innerText=this.all[i].Name +":"+ proportionValue + "%";
}
else {
objRow=objLegendTable.insertRow();
objRow.style.height="6px";
var objColor=objRow.insertCell();//颜色标记
objColor.style.backgroundColor=vColor;
objColor.style.width="16px";
objColor.noWrap=true;
objColor.PieElement=vPieId;
objCell=objRow.insertCell();
objCell.style.font="icon";
objCell.style.padding="0px";
objCell.noWrap=true;
objCell.innerText=this.all[i].Name +":"+ proportionValue + "%";
}
vGroup.appendChild(vPieEl);
}
}VMLPie.prototype.Refresh=function(){}
//改变group容器的比例大小
VMLPie.prototype.Zoom=function (iValue){
var vX=21600;
var vY=21600;
this.VMLObject.coordsize=parseInt(vX / iValue) +","+parseInt(vY /iValue);
}
//根据表格每行数据生成数据对象
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 LegendMouseOverEvent(){
var eSrc=window.event.srcElement;
eSrc.style.border="1px solid black";
}function LegendMouseOutEvent(){
var eSrc=window.event.srcElement;
eSrc.style.border="";
}var objPie=null;
//以下是函数调用
/*参数说明:
strTableId -- 源数据表格Id
intStartRow -- 有效数据开始行数
intNameCols -- 数据名称列
intValueCols -- 数值列
*/
function DrawPie(dataArray,imgSpace,pCaption){
imgSpace=document.getElementById(imgSpace);
objPie=new VMLPie(imgSpace,"","",pCaption);
objPie.BorderWidth=1;
objPie.BorderColor="blue";
objPie.backgroundColor="#ffffff";
//objPie.Shadow=true;
//###############右边的说明表格处理,决定分成几行几列###########################
var strBodyInnerHTML ="\
<v:shape alt='' style='position:relative;valign:top;left:0px;top:0px;width:100%;height:10%;z-index:1'>\
<table cellspacing='0' cellpadding='0' width='100%' height='100%' border='0'>\
<tr><td align='center'><font color='black' style='font-size:13px;' face='Arial Black'>"+objPie.Caption+"</font></td>\
</tr>\
</table>\
</v:shape>";
imgSpace.innerHTML = strBodyInnerHTML;
for (var i=0;i<dataArray[0].length ;i++ )
{
objPie.AddData(dataArray[0][i],dataArray[1][i],"");
}
if ( i > 8) { //如果源数据表格有效数据行大于8行,做换行处理
numTableCols = 2;
numTableRows = 2 + parseInt((i - 1) / 2);
}
else {
numTableCols = 1;
numTableRows = 9;
}
objPie.Draw(numTableRows,numTableCols); //调用画图方法
}
</script>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<Script language="Javascript">
function myprint(){
//printbutton.style.visibility="hidden";
print();
}
function myclose(){
//printbutton.style.visibility="hidden";
window.close();
}
</Script>
<body onload="DrawPie(jsArray,'imgTd','2002-10-01 至 2004-10-01 期间关键数据图表');">
<br><br>
<center>
<table width="90%" height="90%" border=0 style="border-width:1px; border-style:solid; border-color:black ">
<tr><td id="imgTd">
</td></tr>
</table>
</center>
<div id=printbutton><p align=center><input type=button name=printb value="打印" onclick="myprint()"> <input type=button name=printa value="关闭" onclick="myclose()"></p></div></body>
</html>
var div1=document.createElement("div");
div1.style.width="40%";
div1.style.display="none";
div1.style.position="relative";
div1.style.zIndex=10000;
div1.id="divDes"
vGroup.appendChild(div1);
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 proportionValue=0;
var pieAngle=0;
var prePieAngle=0;
var objRow=null;
var objCell=null;
for(i=0;i<this.all.length;i++){
vTotal+=Math.abs(this.all[i].Value);
} var objLegendRect=document.createElement("v:rect"); //创建一个矩形元素
var objLegendTable=document.createElement("table"); //创建一个table元素
objLegendTable.cellPadding=5;
objLegendTable.cellSpacing=10;
objLegendTable.border=0; objLegendTable.width="100%";
objLegendTable.height="100%";
with(objLegendRect){
style.left="60%"; //右边表格距左多少
style.top="30%"; //右边表格距上多少
style.width="38%"; //表格宽度
style.height="40%"; //表格高度
fillcolor="#e6e6e6";
strokeweight="1px";
} var vTextbox=document.createElement("v:textbox");
vTextbox.appendChild(objLegendTable);
objLegendRect.appendChild(objLegendTable);
var vShadow=document.createElement("v:shadow");
vShadow.on="t";
vShadow.type="single";
vShadow.color="graytext";
vShadow.offset="2px,2px";
objLegendRect.appendChild(vShadow); vGroup.appendChild(objLegendRect);
var strAngle="";
for(i=0;i<this.all.length;i++){ //顺序的画出各个饼图 var vPieEl=document.createElement("v:shape");
var vPieId=document.uniqueID;
vPieEl.id="pie" + i.toString();
vPieEl.style.width="55%";
vPieEl.style.height="90%";
vPieEl.style.top="5%";
vPieEl.style.left="2%";
vPieEl.style.position="relative";
vPieEl.coordsize="1500,1400";
vPieEl.strokecolor="white";
vPieEl.id=vPieId;
pieAngle= Math.abs(this.all[i].Value) / vTotal;
startAngle+=prePieAngle;
prePieAngle=pieAngle;
endAngle=pieAngle; strAngle+=this.all[i].Name +":" +Math.abs(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";
if ((parseFloat(endAngle * 100)).toString().indexOf(".") != -1) {
proportionValue = (parseFloat(endAngle * 100)).toString().split(".")[0] + "." + (parseFloat(endAngle * 100)).toString().split(".")[1].substr(0,2);
}
else {
proportionValue = parseFloat(endAngle * 100);
} var name1=this.all[i].Name;
var value1=this.all[i].Value;
vPieEl.attachEvent('onmouseover',new Function("deal1('"+name1+"','"+value1+"','"+proportionValue+"')"));
vPieEl.attachEvent('onmouseout',deal2);
vPieEl.innerHTML='<v:fill rotate="t" angle="-135" focus="100%" />';
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);
var vColor=this.RandColor();
vPieEl.fillcolor=vColor; //设置颜色
//开始画图例---- 右边的信息列表
if (parseInt(i / (numTableRows - 1)) != 0) {
var objColor=objLegendTable.rows(i%(numTableRows - 1)).insertCell();//颜色标记
objColor.style.backgroundColor=vColor;
objColor.style.width="16px";
objColor.noWrap=true;
objColor.PieElement=vPieId;
var objCell=objLegendTable.rows(i%(numTableRows - 1)).insertCell();//颜色标记
objCell.style.font="icon";
objCell.style.padding="0px";
objCell.noWrap=true;
objCell.innerText=this.all[i].Name +":"+ proportionValue + "%";
}
else {
objRow=objLegendTable.insertRow();
objRow.style.height="6px";
var objColor=objRow.insertCell();//颜色标记
objColor.style.backgroundColor=vColor;
objColor.style.width="16px";
objColor.noWrap=true;
objColor.PieElement=vPieId;
objCell=objRow.insertCell();
objCell.style.font="icon";
objCell.style.padding="0px";
objCell.noWrap=true;
objCell.innerText=this.all[i].Name +":"+ proportionValue + "%";
}
vGroup.appendChild(vPieEl);
}
}VMLPie.prototype.Refresh=function(){}
//改变group容器的比例大小
VMLPie.prototype.Zoom=function (iValue){
var vX=21600;
var vY=21600;
this.VMLObject.coordsize=parseInt(vX / iValue) +","+parseInt(vY /iValue);
}
//根据表格每行数据生成数据对象
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 LegendMouseOverEvent(){
var eSrc=window.event.srcElement;
eSrc.style.border="1px solid black";
}function LegendMouseOutEvent(){
var eSrc=window.event.srcElement;
eSrc.style.border="";
}var objPie=null;
//以下是函数调用
/*参数说明:
strTableId -- 源数据表格Id
intStartRow -- 有效数据开始行数
intNameCols -- 数据名称列
intValueCols -- 数值列
*/
function DrawPie(dataArray,imgSpace,pCaption){
imgSpace=document.getElementById(imgSpace);
objPie=new VMLPie(imgSpace,"","",pCaption);
objPie.BorderWidth=1;
objPie.BorderColor="blue";
objPie.backgroundColor="#ffffff";
//objPie.Shadow=true;
//###############右边的说明表格处理,决定分成几行几列###########################
var strBodyInnerHTML ="\
<v:shape alt='' style='position:relative;valign:top;left:0px;top:0px;width:100%;height:10%;z-index:1'>\
<table cellspacing='0' cellpadding='0' width='100%' height='100%' border='0'>\
<tr><td align='center'><font color='black' style='font-size:13px;' face='Arial Black'>"+objPie.Caption+"</font></td>\
</tr>\
</table>\
</v:shape>";
imgSpace.innerHTML = strBodyInnerHTML;
for (var i=0;i<dataArray[0].length ;i++ )
{
objPie.AddData(dataArray[0][i],dataArray[1][i],"");
}
if ( i > 8) { //如果源数据表格有效数据行大于8行,做换行处理
numTableCols = 2;
numTableRows = 2 + parseInt((i - 1) / 2);
}
else {
numTableCols = 1;
numTableRows = 9;
}
objPie.Draw(numTableRows,numTableCols); //调用画图方法
}
</script>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<Script language="Javascript">
function myprint(){
//printbutton.style.visibility="hidden";
print();
}
function myclose(){
//printbutton.style.visibility="hidden";
window.close();
}
</Script>
<body onload="DrawPie(jsArray,'imgTd','2002-10-01 至 2004-10-01 期间关键数据图表');">
<br><br>
<center>
<table width="90%" height="90%" border=0 style="border-width:1px; border-style:solid; border-color:black ">
<tr><td id="imgTd">
</td></tr>
</table>
</center>
<div id=printbutton><p align=center><input type=button name=printb value="打印" onclick="myprint()"> <input type=button name=printa value="关闭" onclick="myclose()"></p></div></body>
</html>
解决方案 »
- ExtJs4.2中把Panel嵌入到tabPanel的问题
- javascript作为客户端语言能进行本地文件或者数据库操作吗???
- 关于uploadify的一个小问题
- 求大家给改个代码!jsp的!拜托了!
- 高手帮我看一下这段Javascript为何不弹窗口
- javascript新手:让我苦闷的javascript
- 求一个可以挂在网页上自动投票的js代码和方法
- javascript中引用包的问题
- 有一个挺长的页面,在下方有一个iframe,怎样在iframe里的内容load完毕后,自动滚动页面至iframe处?
- 如何通过javascript写一个文件11.html??
- 请问如何让页面运行完之后才调用某个js函数
- 关于src=myjava.js的问题
var a = ""
for (var i=0; i< 100000; i++)
{
a += "a";
}
alert("end of execution");
</script>你看看运行这个的时候CPU是多少。
你们粘贴后,打开任务管理器,
察看cpu使用,若是再80%以上就是不正常的,
我有另外一份饼图,
执行后cpu只有7%,
所以不知道是哪里出了问题,
还请大家仔细看看~~
ps:不可能是配置问题,我的XP1800+,256M
我有另一份饼图,执行完后只有7%,所以肯定有问题,但不知道怎么回事~~~~
cpu是不是总是80% 以上~~~!!!
如果有必要我会把另一份饼图贴上来,
你们对比以下就会发现了
<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;
}
/////////////////////////////////////////////////////////////////////////////////////////////////
//接口功能:
// 开始画图,将图形画到指定的容器上面
/////////////////////////////////////////////////////////////////////////////////////////////////
//画外框
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;
}
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>
具体代码太长,可能我也没有时间帮你做完整调试,给你以下几个个人建议1。如果是非常复杂的图形,建议不要使用VML,采用SVG或者服务器生成时比较合适的选择2。VML在IE 5.0或者5.5下面的执行不是很流畅,按照我个人感觉,应该是VML引擎作的不是很好吧,所以建议在IE6.0下面去使用3。不要使用JavaScript去做大量计算的工作,毕竟那不是它擅长的领域4。我写程序的时候为了懒惰,采用的是VML DOM,按照目前的感觉来说,VML是比较不成熟的
原来是蓝色大哥写的,多谢~~~!!1。头头指定要用VML,我也目办法再说我对SVG不熟
2。我用的是IE6再次感谢楼上的所有兄弟~~~
既然原作者都出来了,我也没什么说得了,
反正能凑合用,就先到这里吧~~~!!
明天来结贴。PS:蓝色大哥如果有时间帮忙看看,我很想知道究竟是什么问题,
用你的源程序就没事,我的就80%,着实郁闷!!
我总觉得是程序问题,谢谢了~!~~!~~!~~!~~;)
我查了半天,应该是这句话有问题。
littleboys(飞龙) :
this.Container.appendChild(o);
我查了半天,应该是这句话有问题。
--------------------------------------------呵呵不添这一句,当然就不费cpu了。其实并不是具体哪一句appendChild有问题,唯一的问题在于appendChild太多了。其实少画几个大饼cpu就降下来了。看来是浏览器在处理vml的时候没有优化。liuruhong画的大饼比较简单,当然没那么费cpu了。
还应该是程序的问题。
问题应该是表格嵌套问题吧。
把<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> 就可以了。