Last month I wrote a VML exercise-line chart. Today I will paste the slice chart. Slice charts are quite cost-effective. I found some examples on the Internet, but they only come out of the end and I cannot see how he calculated them. In the thinking in VML tutorial of leopard, it is done using an AC parameter of path, but he wants to convert the angle to radians. There are still some other computations, but he does not understand it.
Finally, we found that using the AE parameter of path as the slice graph is the best choice, so it is easy to understand and calculate. Let's take a look at the explanation of AE on the W3C Website:Ommand: AE
Name: Angleellipseto
Parameters: 6
Description: Center (x, y) size (W, h) Start-angle, end-angle. draw a segment of an ellipse as describes using these parameters. a straight line is drawn from the current point to the start point of the segment. the last two parameters of the reference content are the angle opened by the slice, but it is confusing to multiply the angle value by 2 ^ 16, that is, 65536. In addition, start-angle is the starting angle, but end-angle is not the ending angle. End-angle should be the angle number passed by slice opening. It took me a long time to figure it out.
The following is all the code. You are welcome to contact me.
<HTML xmlns: V = "urn: Schemas-Microsoft-com: VML">Line chart
The following is my first finished VML line chart, recorded: <HTML xmlns: V = "urn: Schemas-Microsoft-com: VML">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> VML </title>
<Style type = "text/CSS">
V/: * {behavior: URL (# default # VML )}
</Style>
<Script language = "JavaScript" type = "text/JavaScript">
Function chart_draw (title, width, height, XY ){
VaR S, I, FN;
VaR P = "";
VaR x = array (9)
Var y = array (9)
Fn = "somatization | forcible symptoms | interpersonal sensitivity | depression | anxiety | hostility | terrorism | paranoid | mental illness | others". Split ("| ");
For (I = 0; I <10; I ++ ){
X [I] = I * 100;
Y [I] = 400-(XY [I]-1) * 100;
P + = x [I] + "," + Y [I] + "";
}
S = "<v: group style = 'width:" + width + "PX; Height:" + height + "PX 'coordsize = '000000'> ";
// Background
S + = "<v: rect style = 'width: 1005; Height: 500 'fillcolor = 'white' strokecolor = 'black'> ";
S + = "<v: Shadow on = 't'type = 'single 'color = 'silver' offset = '5px, 5px '/> ";
S + = "</V: rect> ";
// Title
S + = "<v: rect style = 'position: absolute; top: 5; width: 1000; Height: 50' stroked = 'F'> ";
S + = "<v: textbox style = 'font-size: 14px; font-weight: bold; text-align: Center'>" + title + "</V: textbox> ";
S + = "</V: rect> ";
// Curve coordinate grid
S + = "<v: group style = 'position: absolute; top: 50px; left: 60px; width: 900px; height: 400px 'coordsize = '000000' coordorig = '000000'> ";
S + = "<v: rect style = 'width: 900px; Height: 400px 'strokecolor = '# CCC'/> ";
// Horizontal grid
For (I = 1; I <= 40; I ++ ){
S + = "<v: line from = '0," + I * 10 + "'To = '000000'," + I * 10 + "'> ";
If (I = 20)
S + = "<v: stroke color = '# f90'/> ";
Else if (I % 10 = 0)
S + = "<v: stroke color = '# CCC'/> ";
Else
S + = "<v: stroke color = '# CCC 'dashstyle = 'mongodash'/> ";
S + = "</V: Line> ";
}
// Vertical Grid
For (I = 1; I <= 8; I ++ ){
S + = "<v: line from = '" + I * 100 + ", 0' to ='" + I * 100 + ", 400 'strokecolor = '# CCC'/> ";
}
// Curve
S + = "<v: polyline style = 'position: absolute 'strokecolor = 'green' filled = 'F' strokeweight = '1px 'points = '"+ P +"'/> ";
// Each discount point
For (I = 0; I <10; I ++ ){
S + = "<v: rect style = 'position: absolute; left:" + (X [I]-4) + "; top: "+ (Y [I]-4) +"; width: 8; Height: 8 'title = '"+ FN [I] + ": "+ XY [I] +" 'fillcolor = 'red' stroked = 'F'/> ";
S + = "<v: shape style = 'position: absolute; left:" + (X [I] + 10) + "; top: "+ (Y [I]-8) +"; width: 35; Height: 30; font-size: 10px; font-weight: bold; color: #666 '> "+ XY [I] +" </V: Shape> ";
}
S + = "</V: group> ";
// Bottom Project
For (I = 0; I <fn. length; I ++ ){
S + = "<v: shape style = 'position: absolute; left:" + (20 + I * 100) + "; top: 460; width: 80; height: 30; text-align: center; font-size: 12px '> "+ FN [I] +" </V: Shape> ";
}
// Project on the left
For (I = 1; I <6; I ++ ){
S + = "<v: shape style = 'position: absolute; left: 30; top:" + (I * 100-57) + "; width: 30; height: 100; text-align: center; font-size: 12px '> "+ (6-i) +" </V: Shape> ";
}
S + = "</V: group> ";
Document. Write (s );
}
</SCRIPT>
</Head>
<Body>
<Script language = "JavaScript" type = "text/JavaScript">
// Transition points on the Line Segment
VaR xy = new array (3, 3.1, 1.67, 2.77, 2.5, 2, 3.5, 2.33, 4, 2.6 );
// Enter the image. The width and height can be changed.
Chart_draw ("SCL-90 symptom self-evaluation results analysis map", 700,350, XY );
</SCRIPT>
</Body>
</Html>Experience
Although the results are as you may have imagined, they also contain bitterness and tears (which is quite sour). It took a long time to figure out when there were several problems:
1. <v: group> the relationship between the width, height, and coordsize of the element, as well as the position and size of the child element. Coordsize is the coordinate, and width and height are the actual sizes displayed by coordsize = "1000,500", width and height are 800px and 400px, respectively, the unit of left, top, width, and height of sub-elements is based on 1000 and 500, regardless of whether the unit is pixel. For example, if the <v: rect> In the <v: group> is 100 away from the four sides, you should write it as: <v: rect style = "Left: 100; top: 100; width: 800; Height: 300 "/>. The width and height here are the coordinate values. The actual size is not necessarily determined by <V: the values of group> element width and height. So dizzy ~~~.
2. Scale on coordinates. According to the thinking in VML of the leopard, it is implemented with an absolute positioning <p>. However, there is a problem in actual operations. If the image is enlarged or reduced, the scale position on the coordinates changes. I suspect it may be because if it is not a VML tag (such as a p tag), its location does not follow the coordinate value, but is set with real pixels. Therefore, I used the <v: Shape> label to represent the scale on the coordinates. The scale-in and scale-out tests were kept at the original position.
3. To facilitate the calculation of coordinate values when a line is officially drawn, a <v: group> with the same coordinate size as the line is nested in the outer <v: group>, in this way, the line coordinate value is based on the <v: group> coordinate of the inner layer, which is easy to calculate and will not be disturbed by other objects.
4. If the order of line and coordinate lines is different from that of the preceding example, the insurance method is to add the Z-index attribute, which is represented by numbers, the larger the number, the more floating the upper layer.
Suspect
1. The coordorig (coordinate origin) attribute of <v: group> is not very easy to understand. I have set any value for this attribute, but the image has not changed...
2. If you want to make the coordinate origin start from the lower left corner, calculating the coordinate value of each point is exactly the actual value, instead of calculating the difference value, you do not know how to implement it, the coordorig attribute does not seem to achieve this effect.
More...
In addition, I will provide several URLs. If you are interested, you can study them:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
