WEB开发网
开发学院网页设计JavaScript 利用vml制作统计图全攻略----饼图的制作(四)... 阅读

利用vml制作统计图全攻略----饼图的制作(四)

 2010-09-14 13:32:30 来源:WEB开发网   
核心提示: 5. 通过设置fillcolor来设置饼图块的颜色,同时设置title提供一些提示信息.6. 对于图例开始着色,利用vml制作统计图全攻略----饼图的制作(四)(2),同时添加图例的文字说明.7. 因为所有的坐标系统都是相对的,为了保证美观,希望可以和大家共同探讨,另外完整的源代码我已经

5. 通过设置fillcolor来设置饼图块的颜色,同时设置title提供一些提示信息.

6. 对于图例开始着色,同时添加图例的文字说明.

7. 因为所有的坐标系统都是相对的,为了保证美观,对于objLegendGroup我通过1400 * this.all.length +"px"来求得,而对于图例的colortip,高度和宽度就是动态计算的。

到目前为止,通过程序已经建立了一个基于VML的Pie,剩下的就是输出的问题了,前文我也提到过,我通过DOM方式建立的VML在显示方面没有任何问题,可是在动态交互方面,似乎不起作用,obj.VMLObject就是一个DOM对象,可是对于onmouseover,onmouseout等等的设置如果直接使用appendChild的方式的时候,根本无法起作用。而通过设置innerHTML来生成VML图形的时候,那些鼠标事件却可以响应,有过这个方面编程的朋友麻烦告诉我具体的原因如何。

function HoverPie(el){}
function RestorePie(el){}
function LegendMouseOverEvent(){}
function LegendMouseOutEvent(){}

这四个函数就是提供了简单的交互作用。具体的代码如下:

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);
}

HoverPie提供了简单的图形相对位移的功能.

5. VMLPie.prototype.Zoom

提供了图形的放大和缩小的功能,既然是作为矢量图形,那么其放大和缩小就应该是没有任何图像损失的,实现的原理很简单,只需要修改group的坐标系统就可以实现,这个也就是我一直强调的需要将shape都放到group中的主要原因,对于文字,指能够使用和html Dom相同的方式进行设置。

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";
         }
     }
}

到目前为止,已经全部介绍完了VMLPie的全部制作过程,我是第一次写这样的文章,可能在很多东西的表述方面不是特别清楚,希望可以和大家共同探讨,另外完整的源代码我已经贴在CSDN的论坛里头,大家可以去下载。

http://expert.csdn.net/Expert/topic/2160/2160456.xml?temp=.4498102

上一页  1 2 

Tags:利用 vml 制作

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接