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

我们现在就开始来看如上代码的实现。

 

1.                          首先建立一个v:shape,left,top,width,height分别设置为1000px,4000px,15000px;14000px;这个的数字是我根据大致的位置确定的。

2.                          设置每个shapeid,我采用了document.uniqueID,就是用DOM的方法提供的随机id,本来我没有打算设置这个ID,但是后来考虑到和legend的交互,所以就设置了每个shapeID.

3.                          设置shapeonmouseoveronmouseout事件,开始的时候我是采用attachEvent的方式来实现的,后来发现无法起作用(到现在我也没有找到原因),求出每个数据所占的比例。

4.                          设置Path,这个也就是比较令人难以看懂的部分了,我首先求出了startAngleendAnglestartAngle的意义是这样的,假设有3个数,0.2,0.2,0.4,对于第二项来说,startAngle应该是 0.25,endAngle0.25,对于第三项来说,startAngle0.5,endAngle0.5,总而言之,startAngle可以表示为前面数据所占的比例,engAngle表示当前数据所占的比例。Path有很多指令,对于其他指令,我就不多作解释,而这里使用的是M 750 700 AE 750 700 750 700 start end 。对于shape我重新定义了coordsize=1500, 1400 ,m 750,700则表示移动到 750700,就是移动到shape定义的中心,AE用来画曲线,总共有6个参数,w 3c note描述如下center (x,y) size(w,h) start-angle, end-angle,前面四个参数不难理解,剩下的两个参数我不是特别明白意思,但是在国外的一篇文章看到其中的算法如下应该是 2^16 * 度数,对应于程序,就应该是startAngle * 2^16 * 360,因为我的startAngle是比例。

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

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

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

到目前为止,通过程序已经建立了一个基于VMLPie,剩下的就是输出的问题了,前文我也提到过,我通过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

 

  • 0
    点赞
  • 2
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

1 引言 4 1.1 课程设计目标 4 1.2 编程工具(编程环境)介绍 4 1.3 实施时间及主要实施步骤 4 2 需求分析 5 3 系统总体设计 6 4 数据库设计 6 5 主要功能模块的设计与实现 10 5.1 功能模块1详细设计(综合查询员工信息)..........................................................10 5.1.1 详细设计.......................................................................................................10 5.1.2 算法流程........................................................................................................15 5.1.3 界面设计及测试结果.....................................................................................15 6 调试分析 15 7 用户手册 16 8 测试结果 17 8.1 员工信息的添加...................................................................................................17 8.2 员工信息的修改...................................................................................................17 8.3 员工信息的删除...................................................................................................18 8.4 员工信息的综合查询...........................................................................................18 8.5 员工信息按性别统计的结果................................................................................19 8.6 员工信息按状态统计的结果...............................................................................19 8.7 员工信息按职称统计的结果................................................................................20 9 结论 20 10 参考文献 20
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值