Use VML production statistics full Raiders ---- Cakes Make (2)

After completing a series of preparations, you should now really introduce how to draw PIE. First, look at one of the following schematic, clearly describing the element structure of VMLPIE.

In order to display a text structure constituting VML, I will give the following ways using XML format.

VML Pie

Chongqing (50)

After completing the basic ideas of the drawing, the rest is to gradually complete the establishment process through the DOM. For the sake of simplicity, the function of our installation function is gradually analyzed.

1. VMLPIE

This.Container = PCONTAINER;

THIS.WIDTH = PWIDTH || "400px";

THISHEIGHT = 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) ") ;

}

THIS.VMLOBJECT = NULL;

This.LegendObject = NULL;

This function is just a simple initialization of some variables, and some properties that Class can use are declared here. The RandColor function provides a role of generating random colors. This is what I mentioned in the foregoing. I use random colors for the color of each block of the pie chart. One question brought one thing is to have two colors. Comparison Close, if you can give me a few basic color lists, I will be grateful.

2. Vmlpie.prototype.adddata

Add chart data, here I use prototype lag loading method, if the reader thinks that it is not clear enough, it can be modified into built-in form like this.randColor.

The implementation code is as follows:

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;

}

Here, an Object is used to store each data item and then put it into this.all this array.

3. Vmlpie.Prototype.draw

The entire class implements the most critical function, that is, in this function and subsequent CreatePie function, a graphic drawing work is implemented step by step.

// Excellent box

Var o = document.createElement ("v: group");

o.id = this.id;

O.Style.width = this.width;

O.Style.height = this.Height;

o.coordsize = "21600, 21600";

// Add a background layer

VAR vRect = Document.createElement ("v: Rect");

VRect.Style.width = "21600px"

VRect.Style.height = "21600px"

O.Appendchild (VRECT);

// Add title

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

/ / Set the border size

IF (this.borderwidth) {

VRECT.STROKEWEIGHT = this.borderwidth;

}

/ / Set border color

IF (this.bordercolor) {

VRECT.STROKECOLOR = this.bordercolor;

}

/ / Set background color

IF (this.backgroundcolor) {

VRECT.FILLCOLOR = this.BackgroundColor;

}

// Set whether or not the shadow appears

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;

After completing the above work, a Canvas (canvas) has been constructed, completing the production of the graphics frame and its title, and the remaining is the most important job call CreatePie to draw each block and make a legend.