現在我們來看看VML的一些應用。數據圖表可以說是VML的拿手好菜。繪制圖表,最重要的步驟是把數據轉換成坐標。由于VML是矢量的, 給數據的取值范圍有很大的自由度,因為你可以用帶小數的坐標值,也可以是非常大的數據做為坐標值。
在做圖表之前,必須明確一些事情,要把圖表看成一個整體,這意味著使用 Group 將 VML 包容起來;x,y 軸是在第四像限里面的;VML的大小由 width,height 決定,而不是由coordsize決定。接下來,讓我們看看幾個經典的圖表。
曲線圖(走勢圖):看起來是曲線,其實細分起來就是一段段小折線組成的。所以我們可以選擇PolyLine來做。首先我們來畫坐標軸:
v:group ID="group1" style="WIDTH:500pt;HEIGHT:300pt" coordsize="5000,3000">
v:line from="200,100" to="200,2800" 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>
也許你希望顯示坐標軸上的刻度,這也很容易實現,我們可以用一個絕對定位的P來做坐標,在Group里面,使用絕對實際上是相對Group的相對定位的。坐標值需要你自己調整了。因為我們畫分橫坐標使用的是 px=200+73*i;(其中200是距離左邊的距離) 縱坐標是 py=2800-73*i; (因為總共的高度是2800,所以要用減去)現在,把數據轉換成坐標變得很容易了。 當然這里的 i 是 0,1,2..7 ,也可以是你具體的數據,換算的時候,只需要按照比例得到坐標值,比如說你的縱坐標的價值是從 100,200,300,..700 相應的反應到坐標上就是 px=200+73*i*1/100 (其中,i為數據值,1/100是坐標值和數據的比例)
畫圖表的準備工作已經全部做好了,現在就差數據了。有了數據,把數據灌輸到 PolyLine 里面,曲線就顯示出來了?,F在我們使用一些假數據,看看上面的效果如何!
本節例子比較多,請訪問下頁。