学步园

 

做完了一系列的准备工作，那么现在应该开始真正介绍如何绘制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