Use VML production statistics full Raiders ---- Cake chart production (3)

4. Vmlpie.Prototype.createpie

CreatePie provides a parameter, which is a container made of pie chart. We have established a V: group element through the above code of Draw, which is the container drawn by the pie chart.

Var mx = math.pow (2,16) * 360;

// This parameter is the key to the graphics

// ae x y width Height Startangle Endangle

// x y represents a center position

// Width Height shape size

The calculation method of // startangle endangle is as follows

// 2 ^ 16 * degrees

Var vtotal = 0;

Var Startangle = 0;

Var endangle = 0;

Var PIEANGLE = 0;

Var predieangle = 0;

// Calculate the sum of data

For (i = 0; i

vtotal = this.all [i] .value;

}

// Establish a legend container

/ / The LEFT, TOP or WIDTH of the child here is the coordinate system set by the container.

//E.g

// Chart Container I set up Coordsize 21600, 21600, then the location of ObjlengendGroup is relative to this coordinate system.

/ / There is no direct relationship with the size display of the actual graphic

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

With (objlegendgroup) {

Style.Left = "17000px";

Style.top = "4000px";

Style.Width = "4000px";

Style.height = 1400 * this.all.Length "PX";

Coordsize = "21600, 21600";

}

// Make the background of the legend and set the shadow

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

ObjlendRect.FillColor = "#ebf

Allf

9";

ObjleGendRect.strokeEGHT = 1;

With (ObjleGendRect) {

// Set to 21600, 21600, is to ensure full cover client area

Style.Width = "21600px";

Style.height = "21600px";

}

/ / Add to the shadow for the legend

Var vshadow = document.createElement ("v: shadow");

vshadow.on = "t";

vshadow.type = "single";

vshadow.color = "graytext";

vshadow.offset = "4px, 4px";

ObjlegendRect.AppendChild (vshadow);

// Put it into the container of the legend

ObjleGendgroup.Appendchild (ObjleGendRect);

This.LegendObject = ObjlegendGroup;

Vgroup.Appendchild (ObjleGendgroup);

At this time, we have completed the drawing of each area, through the above code, I draw a LegendGroup, which uses it as the display position of the legend, the other Lord V: group as the PIE's drawing container, if it is for the specification Consider, you should also put the various shapes of the PIE in a group, which will be more convenient in the future programming control. The following code is what I want to tell, because the code is more critical, in addition to giving code, I also focus on the role of each statement.

For (i = 0; i

VAR VPIEEL = Document.createElement ("V: shape");

VAR vpieid = document.uniqueid;

vpieel.style.width = "15000px";

vpieel.style.height = "14000px";

vpieel.style.top = "4000px";

vpieel.style.Left = "1000px";

vpieel.adj = "0,0";

vpieel.coordsize = "1500, 1400";

vpieel.strokecolor = "white";

vpieel.id = vpieid;

vpieel.style.zindex = 1;

vpieel.onmouseover = "Hoverpie (this)";

vpieel.onmouseout = "restorepie (this)";

Pieangle = this.all [i] .value / vtotal;

STARTANGLE = prepiengle;

PREPIEANGLE = PIEANGLE;

Endangle = PIEANGLE;

Vpieel.path = "MX * STARTANGLE) " PARSEINT (MX * endangle) "XE" "XE"

Vpieel.title = this.all [i] .name "proportion:" Endangle * 100 "% / N Detailed Description:" this.all [i] .tooltiptext;

Vpieel._scale = parseint (360 * (Startangle Endangle / 2);

Var objfill = document.createElement ("v: fill");

Objfill.Rotate = "T";

Objfill.focus = "100%";

Objfill.Type = "gradient";

Objfill.angle = parseint (360 * (Startangle Endangle / 2);

Var objTextBox = Document.createElement ("v: textbox");

Objtextbox.innerhtml = this.all [i] .name ":" this.all [i] .value;

ObjTextBox.inset = "5px 5px 5px 5px"; objtextbox.style.width = "100px";

Objtextbox.style.height = "20px";

Var vcolor = this.randcolor ();

vpieel.fillcolor = vcolor; // Set color

// Start the legend

p.innertext = vpieel.outerHTML;

Var colortip = document.createElement ("v: Rect");

Var Iheight = PARSEINT (21600 / (this.all.Length * 2));

Var iWidth = PARSEINT (IHEIGHT * PARSEINT (ObjleGendgroup.Style.Height) /PARSEINT (ObjleGendgroup.style.width /1.5);

ColORTIP.Style.height = IHEIGHT;

ColorTip.style.Width = iWidth;

ColorTip.style.top = IHEIGHT * i * 2 PARSEINT (IHEIGHT / 2);

ColORTIP.Style.Left = PARSEINT (iWidth / 2);

ColORTIP.FILLCOLOR = Vcolor;

ColorTip.element = VPIEID;

//colortip.attachevent ("onmouse" ,lendmouseoverevent);

ColorTip.onMouseOver = "LegendMouseoveRevent ()";

ColORTIP.Onmouseout = "LegendMouseoutevent ()";

VAR texttip = document.createElement ("v: Rect");

Texttip.style.top = parseint (ColorTip.Style.top) - 500;

TEXTTIP.Style.Left = iWidth * 2;

TEXTTIP.INNERHTML = "" this.all [i] .name "(" this.all [i] .value ") ";

ObjlendGroup.Appendchild (ColorTip);

ObjleGendgroup.Appendchild (Texttip);

Vgroup.Appendchild (VPIEEL);

}