Pie Chart (PIE): PIE map is a comparative headache in VML, it may be that my mathematics is not very good! Because VML does not provide direct PIE (sector) statement, now you have to draw pieces, you can calculate yourself Coordinate, this is used to use some triangular functions. Also note that JavaScript's triangular letters are in an arc. Therefore, to convert the angle into an arc.
apple:
10% 20% 30% 40% 50%
pear:
5% 10% 20% 30% 40%
banana:
%
Before writing this tutorial, I haven't died in the PIE map, thinking is very simple, one step can be done, but when I really paint, I almost didn't sleep one night (eyes stunned, mouth water).
I will study first
Http://www.w3.org/tr/note-vml There is a write about the AE (Angleellipseto) command inside PATH (there is no on these commands in MSDN, 3W all commands). The command can do very simple, but it has 6 parameters, and the last two participation is difficult to understand. Because in some examples, these two are very large, five or six are more. I have to give up this order (a night passed).
The problem of netizen EMU (Ston) on 9CBS, and his finally completed PIE map, give me some inspiration, his practice is to use the Polyline painting, which is really feasible, but if the accuracy is too late, the curve is Not smooth. I found that the Ar command in Path is used to draw arcs. The problem finally solved. Now talk about the use of the Ar command.
AR Left, Top, Right, Bottom Start (X, Y) End (x, y) Total six parameters. The four parameters in front are the top left corners and lower right corner coordinates, respectively. This determines the range of arcs. The latter two parameters are the start coordinates and end coordinates of the arc. At the time of knowing the angle and radius, the last two parameters are very effective. The following code can draw a fan shape, SA, EA to determine the starting angle and end angle, note, here, in the function, I will convert the angle to the arc. Color is color, n is some prompt information:
Var r = 2000; // radius
Function Createpie (SA, EA, Color, N)
{
VAR fs = math.pi * 2 * (SA / 360); / / angle conversion to radians
Var fe = math.pi * 2 * (EA / 360);
Var SX = PARSEINT (R * Math.sin (FS));
Var sy = parseint (-r * math.cos (fs)); // Note that there is a negative sign because the fourth image of the VML is equivalent to the first image limit in mathematics.
Var EX = PARSEINT (R * Math.sin (Fe));
Var EY = PARSEINT (-R * Math.cos (Fe));
Var Strpie = " "Coordsize = '4000, 4000' strokeweight = '1pt' FillColor = '" COLOR "'" "Path = 'M0, 0 L" SX "," SY " Ar-2000, -2000, 2000, 2000, " EX ", " EY ", " SX ", " Sy " L0, 0 x e '/> "; Var newpie = document.createElement (STRPIE); Group1.insertbefore (newpie); } The data chart is introduced here, there may be other forms of charts, but there are three examples, and other other things I believe you can know what to do. The next section will introduce a wide vector map of VML.
