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

做完了一系列的准备工作,那么现在应该开始真正介绍如何绘制Pie了吧。首先看看下面的一个示意图,清楚地描述了VMLPie的元素结构。

 

为了更加清楚的显示构成VML的文本结构,我使用XML的格式给出了如下的方式。

<v:group>
   
    <!--设置饼图的背景及其标题 -->
   
   <v:rect>
   
           <v:textbox>VML饼图</v:textbox>
   
   </v:rect>
   
    <!--设置饼图的各个块-->
   
   <v:shape path="...">      
   
   </v:shape>
   
   <!--图例元素集合 -->
   
   <v:group>
   
           <!--设置图例的颜色 -->
   
           <v:rect fillcolor="green"></v:rect>
   
           <v:rect>
   
                    <!-- 设置图例文字-->
   
                    <v:textbox>重庆(50)</v:textbox>
   
           </v:rect>
   
   </v:group>
   
</v:group>
   

完成了制图的基本思路之后,剩下的就是通过DOM逐步完成建立过程了,为了简单起见,我们安装函数的功能进行逐步分析。

 

1.             VMLPie

      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;
   

 

这个函数只是简单的初始化了一些变量,将class可以使用的一些属性在这里做了声明。RandColor函数提供了生成随机颜色的作用,这个也就是我在前文提到的,对于饼图的各个块的颜色,我都采用随机颜色,这样带来的一个问题就是会出现有些时候两个颜色比较接近,如果随能够给我提供几个基础的颜色列表,我将感激不尽。

2.             VMLPie.prototype.AddData

添加图表数据,在这里我采用了prototype滞后加载的方式实现,如果读者认为这样不够清晰,可以修改成this.RandColor那样的内置形式。

实现代码如下:

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

这里使用一个Object来存储每一个数据项,然后放到this.all这个数组中。

3.             VMLPie.prototype.Draw

整个类实现关键的函数,也就是在这个函数和后续的CreatePie函数中,一步一步地实现了图形的绘制工作。

//画外框
    
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;

 

完成上述工作之后,已经构建出了一个canvas(画布),完成了图形外框及其标题的制作,剩下的也就是最最重要的工作调用CreatePie来画出各个块,并且作出图例。

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

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值