We now start to see the implementation of the above code.
1. First create a V: Shape, LEFT, TOP, WIDTH, and HEIGHT set to 1000px, 4000px, 15000px; 14000px; this number is determined by the general position.
2. Set up each shape ID, I use the document.uniqueID, which is the random ID provided with the DOM method. I didn't plan to set up this ID, but later considering the interaction with Legend, so I set up each shape. ID.
3. Set the onmouseover, onmouseout event, I started to implement the way when I started, and then I found that I couldn't work (now I didn't find the reason), and find the proportion of each data.
4. Set PATH. This is also a part that is more difficult to understand. I first came out of Startangle and Endangle. The meaning of Startangle is such that there are 3 numbers, 0.2, 0.2, 0.4, for the second item For the Startangle should be 0.25, endangle is 0.25, for the third term, Startangle is 0.5, endangle is 0.5, in turn, the startangle can represent the proportion of the previous data, eNGLE represents the proportion of current data. There are many instructions in PATH. For other instructions, I don't explain, and this is the M750 700 AE 750 700 750 700 Start End. I redefined Coordsize = "1500 for Shape
1400
"
The M 750, 700 indicates that moves to 750, 700, which is the center that moves to Shape definition, AE is used to draw curves, with a total of 6 parameters, W
3C
Note describes the following CENTER (X, Y) Size (W, H) Start-Angle, End-Angle, the front four parameters are not difficult to understand, I don't especially understand the remaining two parameters, but there is an abroad The algorithm seen in the article should be 2 ^ 16 * degrees, corresponding to the program, should be Startangle * 2 ^ 16 * 360, because my Startangle is a proportion.
5. Use FillColor to set the color of the pie chart block, and set Title to provide some prompt information.
6. Start coloring to the legend while adding a text description of the legend.
7. Because all coordinate systems are relatively, in order to ensure beautiful view, I will find it for ObjleGendgroup, I'm trying to get 1400 * this.length "PX", and the colort, height, and width of the legend are dynamically calculated.
So far, I have established a VML-based PIE through the program, and the rest is the problem. I also mentioned that I also mentioned that I have no problem in display through the DOM mode, but in the dynamic interaction It doesn't seem to work. Obj.vmlobject is a DOM object, but for the setting of onMouseover, OnMouseout, if you use the Appendchild's way, you will not work. When setting InnerHTML to generate VML graphics, those mouse events can respond, have a trouble for programming this aspect to tell me how specific reasons. Function Hoverpie (EL) {}
Function Restorepie (EL) {}
Function legendmouseoverevent () {}
Function legendmouseoutevent () {}
These four functions provide a simple interaction. The specific code is as follows:
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 provides a simple graphic relative displacement function.
5. Vmlpie.prototype.zoom
The enlargement and reduction of graphics is provided. Since it is a vector graphic, then its amplification and shrinking should be no image loss, the principle of implementation is simple, just modifying the coordinate system of Group, this is I have always emphasized the main reason for the need to put Shape in Group. For text, it refers to settings in the same way as 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.getlementsBytagname ("textbox");
For (var i = 0; i Texts [i] .style.fontsize = parseint (Texts [i] .presize) * iValue "PX"; } Else { Texts [i] .style.fontsize = 12 * iValue "PX"; } } } So far, all of the full production processes of VMLPIE have been introduced. I am the first time I wrote such an article, it may not be particularly clear in many expressions, I hope to discuss with you, and the complete source code I have posted In the forum of CBS, you can download it. Http://expert.cbs.net/expert/topic/2160/2160456.xml?temp=.4498102
