Data chart_VML related

Now let's take a look at some applications of VML. Data charts can be said to be VML’s specialty. When drawing a chart, the most important step is to convert the data into coordinates . Since VML is vector, there is a lot of freedom in the value range of the data, because you can use coordinate values ​​with decimals or very large data as coordinate values.
Before making a chart, some things must be clarified. The chart must be viewed as a whole, which means using Group to contain VML; the x and y axes are in the fourth quadrant; the size of VML is determined by width, height is determined by, not by coordsize. Next, let’s look at a few classic charts.
Curve chart (trend chart) : It looks like a curve, but in fact it is composed of small polylines when broken down. So we can choose PolyLine to do it. First let’s draw the coordinate axis:

Maybe you want to display the scale on the coordinate axis. This is also easy to achieve. We can use an absolutely positioned P to do the coordinates. In Group Inside, using absolute is actually relative positioning relative to the Group. The coordinate values ​​need to be adjusted by yourself. Because we use px=200+73*i; (where 200 is the distance from the left) and the ordinate is py=2800-73*i; (because the total height is 2800, so we need to subtract )Now, converting data into coordinates is easy. Of course, i here is 0,1,2..7, or it can be your specific data. When converting, you only need to get the coordinate value according to the proportion. For example, the value of your vertical coordinate is from 100, 200, 300, The corresponding response of ..700 to the coordinates 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)


The preparations for drawing the chart have been done, now we just need the data. With the data, pour the data into PolyLine and the curve will be displayed. Now let’s use some fake data and see how the above works! Click here to display the curve
There are many examples in this section, please visit the next page.