首頁 > web前端 > css教學 > 數據圖表_VML相關

數據圖表_VML相關

WBOY
發布: 2016-05-16 12:09:47
原創
1420 人瀏覽過

現在我們來看看VML的一些應用。數據圖表可以說是VML的拿手好菜。繪製圖表,最重要的步驟是把資料轉換成座標。由於VML是向量的, 給資料的取值範圍有很大的自由度,因為你可以用帶小數的座標值,也可以是非常大的資料做為座標值。
    在做圖表之前,必須先明確一些事情,要把圖表看成一個整體,這意味著使用Group 將VML 包容起來;x,y 軸是在第四象限裡面的;VML的大小由width, height 決定,而不是由coordsize決定。接下來,讓我們來看看幾個經典的圖表。
    曲線圖(走勢圖):看起來是曲線,其實細分起來就是一段段小折線組成的。所以我們可以選擇PolyLine來做。首先我們來畫坐標軸:


  
    
  

: ="200,2800" 至="4800,2800" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
    
   
 🎜> /v:line>
  

    也許你希望顯示座標軸上的刻度,這也很容易實現,我們可以用一個絕對定位的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 裡面,曲線就顯示出來了。現在我們使用一些假數據,看看上面的效果如何! 點這裡顯示曲線    本節範例較多,請造訪下頁。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板