|
| Data chart 1 |
Now let's take a look at some VML applications. Data charts can be said to be the best dish of VML. The most important step for drawing a chart is to convert the data into coordinates. Because VML is vector, it gives a great degree of freedom to the data value range, because you can use coordinate values with decimal places or very large data as coordinate values.
Before creating a chart, you must clarify some things and consider the chart as a whole. This means that VML can be tolerated using Group; the x and y axes are within the fourth image limit; the VML size is determined by the width and height, rather than the coordsize. Next, let's take a look at several classic charts.
Curve chart (trend chart): It looks like a curve. In fact, it is subdivided into small line segments. So we can choose PolyLine. First, draw the coordinate axis: <v: group ID = "group1" style = "WIDTH: 500pt; HEIGHT: 300pt" coordsize = "">
<V: line from = "200,100" to = "" style = "Z-INDEX: 8; POSITION: absolute" strokeweight = "1pt">
<V: stroke StartArrow = "classic"/>
</V: line>
<V: line from = "200,2800" to = "4800,2800" style = "Z-INDEX: 8; POSITION: absolute" strokeweight = "1pt">
<V: stroke EndArrow = "classic"/>
</V: line>
<V: rect style = "WIDTH: 4900px; HEIGHT: 3000px" coordsize = "21600,21600" fillcolor = "white" strokecolor = "black"/>
</Group>Maybe you want to display the scale on the coordinate axis, which is also easy to implement. We can use an absolute position P for the coordinates, in the Group, the usage is definitely relative to the Group. You must adjust the coordinates. We use px = 200 + 73 * I for the x-axis. (200 is the distance from the left) the y-axis is py = 2800-73 * I; (because the total height is 2800, We need to subtract it.) Now, it is easy to convert the data into coordinates. Of course, here I is 0, 1, 2 .. 7. It can also be your specific data. during conversion, you only need to get the coordinate value according to the proportion. For example, the value of your ordinate value is from 100,200,300 ,.. 700 the corresponding reaction to the coordinate is px = 200 + 73 * I * 1/100 (where, I is the data value, 1/100 is the ratio of the coordinate value to the data) 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 8 9 10 11 12
The preparation for drawing charts is complete, and now the data is poor. With the data, the data is instilled into the PolyLine, and the curve is displayed. Now let's use some fake data to see how it works!Click here to display the curve
There are many examples in this section. Please visit the next page. |
| Data chart 2 |
Bar ChartA bar chart is composed of rectangles, and its size is reflected in its height. We need to draw coordinates first, because a column chart mainly reflects its height, so we generally only draw a horizontal line.
Display bar chart 0
You can right-click to view the source code. Some methods can be obtained, but I did not find a general rule when writing these methods, especially when data and coordinate conversion. So we need to be patient. When you use VML to create a chart, you first generate the coordinates, and then divide the horizontal and vertical axes according to the range of x and y. Then you can obtain the x according to the score result, y coordinate and value relationship.
Next we will talk about the Pie chart (Pie ). |
| Data chart 3 |
Pie Chart (Pie): Pie graph is a headache in VML. It may be because of poor mathematics! Because VML does not provide a direct Pie (sector) statement, if you want to draw a Pie chart, you can only calculate the coordinates by yourself. This requires some knowledge of trigonometric functions. Note that the triangle function of JavaScript is in radians. Therefore, convert the angle to radians.
Apple:
10%20%30%40%50%Pear:
5%10%20%30%40% Bananas:%
Before writing this tutorial, I have not personally painted a Pie image. I thought it was very simple and I could do it in one step. But when I did, I almost never went to bed at night ).
I first studied the AE (AngleEllipseTo) commands in the path in the http://www.w3.org/TR/NOTE-VML (MSDN does not have these commands, all 3 w commands ). The command can be easily completed, but it has six parameters, which are hard to understand in the last two competitions. In some examples, these two numbers are very large and there are five or six digits. You have to give up the command (one night later ).The question raised by e-mapreduce (ston) on CSDN, as well as his final Pie diagram, gave me some inspiration. His practice was to draw a curve using PolyLine, this method is indeed feasible, but if the accuracy is too low, the curve will not be smooth. I found that the ar command in path is used to draw an arc. The problem is finally solved. Now let's talk about how to use the ar command.
ArLeft, top, right, bottom start (x, y) end (x, y) has six parameters. The first four parameters are the coordinates in the upper left corner and lower right corner of the circle. In this way, the arc range is determined. The following two parameters are the starting and ending coordinates of the arc. When you know the angle and radius, the last two parameters are very good. The following code draws a slice, sa, and ea to determine the start angle and end angle. Note: here we use angle. In the function, I will convert the angle to a radian. 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); // converts degrees 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 number here, because the fourth limit of the coordinates of VML is equivalent to the first limit in mathematics.
Var ex = parseInt (r * Math. sin (fe ));
Var ey = parseInt (-r * Math. cos (fe ));
Var strPie = "<v: shape title = '" +N+ "'Style = 'position: absolute; z-index: 8; width:" + 2 *R+ "; Height:" + 2 *R+ "'"
+ "CoordSize = '2014 0' strokeweight = '1pt 'fillcolor = '" +Color+ "'"
+ "Path = 'm0, 0 l" +Sx+ "," +Sy+ "Ar-2000,-2000," +Ex+ "," +Ey+ "," +Sx+ "," +Sy+ "L0, 0 x e '/> ";
Var newPie = document. createElement (strPie );
Group3.insertBefore (newPie );
}Data charts have been introduced here. There may be other forms of charts, but with the previous three examples, I believe everyone else can know how to do it. The following section describes a widely used vector map of VML. |
|
