數據圖表

2020-10-23 18:46:21

字體：大中小

來源：轉載

供稿：網友

現在我們來看看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 里面，曲線就顯示出來了。現在我們使用一些假數據，看看上面的效果如何！
    本節例子比較多，請訪問下頁。

上一篇：文本修改留痕

下一篇：給VML增加事件