?? step31.html
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Thinking in VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css" />
<script>
function drawLines()
{
var count=0;//畫橫坐標
for(var i=0;i<=60;i++){
var px=200+73*i;
var newLine = document.createElement("<v:line from='"+px+" 200' to='"+px+" 2800' style='position:absolute;z-index:7'></v:line>");
group1.insertBefore(newLine);
if(count%5!=0){
var newStroke = document.createElement("<v:stroke dashstyle='dot' color='black'/>");
newLine.insertBefore(newStroke);
}
else
{
var newStroke = document.createElement("<v:stroke color='#babbae'>");
newLine.insertBefore(newStroke);
}
count++;
}
count=0; //畫縱坐標
for(var i=0;i<=35;i++){
var py=2800-73*i;
var newLine = document.createElement("<v:line from='200 "+py+"' to='4650 "+py+"' style='position:absolute;z-index:7'></v:line>");
group1.insertBefore(newLine);
if(count%5!=0){
var newStroke = document.createElement("<v:stroke dashstyle='dot' color='black'/>");
newLine.insertBefore(newStroke);
}
else
{
var newStroke = document.createElement("<v:stroke color='#babbae' />");
newLine.insertBefore(newStroke);
}
count++;
}
}
</script>
<body onload="drawLines()">
<table align="center">
<tr>
<td align="center" class="title"><strong>數據圖表</strong></td>
</tr>
<tr>
<td >
<div class="memo" style="width:700;line-height:23px">
現在我們來看看VML的一些應用。數據圖表可以說是VML的拿手好菜。繪制圖表，<font color=red>最重要的步驟是把數據轉換成坐標</font>。由于VML是矢量的，
給數據的取值范圍有很大的自由度，因為你可以用帶小數的坐標值，也可以是非常大的數據做為坐標值。<br>
在做圖表之前，必須明確一些事情，要把圖表看成一個整體，這意味著使用 Group 將 VML 包容起來；x,y 軸是在第四像限里面的；VML的大小由 width,height 決定，而不是由coordsize決定。接下來，讓我們看看幾個經典的圖表。<br>
<strong>曲線圖(走勢圖)</strong>：看起來是曲線，其實細分起來就是一段段小折線組成的。所以我們可以選擇PolyLine來做。首先我們來畫坐標軸：<br>
<div class="memo">
<v:group ID="group1" style="WIDTH:500pt;HEIGHT:300pt" coordsize="5000,3000"><br>
<v:line from="200,100" to="200,2800" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt"><br>
<v:stroke StartArrow="classic"/><br>
</v:line><br>
<v:line from="200,2800" to="4800,2800" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt"><br>
<v:stroke EndArrow="classic"/><br>
</v:line><br>
<v:rect style="WIDTH:4900px;HEIGHT:3000px" coordsize="21600,21600" fillcolor="white" strokecolor="black" /><br>
</group>
</div><br>
也許你希望顯示坐標軸上的刻度，這也很容易實現，我們可以用一個絕對定位的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*<font color=red>1/100</font> (其中,i為數據值,1/100是坐標值和數據的比例)<br><br>
<center>
<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">
<v:shadow on="t" type="single" color="silver" offset="4pt,3pt"></v:shadow>
</v:rect>
<v:polyLine id="poly1" style="visibility:hidden;z-index:9" filled=f strokecolor=red strokeweight=1.5pt points="212,2132 245,2429 278,2355 308,2355 341,2169 2390,2318 2420,2392 2453,2503 2516,2578 2549,2243 2582,2429 2612,2355 2645,2392 2678,2503 2708,2429 2741,2058 2804,2280 2837,2355 2870,2355 2900,2206 2966,2243 2996,2355 3029,2392 3062,1798 3092,1278 3125,1315 3158,1575 3188,1835 3221,1092 3254,906 3284,720 3317,1686 3350,1463 3380,1129 3413,758 3446,1129 3476,795 3509,1352 3542,1166 3572,1426 3605,646 3638,1352 3668,1315 3701,1389 3734,1760 3764,943 3797,1500 3830,1798 3860,1835 3893,1686 3926,1649 3956,1426 4022,1426"/>
<P id="p1" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:365px;HEIGHT:5.6pt;TEXT-ALIGN:center">0</P>
<P id="p2" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:320px;HEIGHT:5.6pt;TEXT-ALIGN:center">1</P>
<P id="p3" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:270px;HEIGHT:5.6pt;TEXT-ALIGN:center">2</P>
<P id="p4" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:220px;HEIGHT:5.6pt;TEXT-ALIGN:center">3</P>
<P id="p5" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:170px;HEIGHT:5.6pt;TEXT-ALIGN:center">4</P>
<P id="p6" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:120px;HEIGHT:5.6pt;TEXT-ALIGN:center">5</P>
<P id="p7" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:75px;HEIGHT:5.6pt;TEXT-ALIGN:center">6</P>
<P id="p8" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:25px;HEIGHT:5.6pt;TEXT-ALIGN:center">7</P>
<P class="Chart" style="LEFT:25px;POSITION:absolute;TOP:380px;HEIGHT:5.6pt;TEXT-ALIGN:center">0</P>
<P class="Chart" style="LEFT:70px;POSITION:absolute;TOP:380px;HEIGHT:5.6pt;TEXT-ALIGN:center">1</P>
<P class="Chart" style="LEFT:120px;POSITION:absolute;TOP:380px;HEIGHT:5.6pt;TEXT-ALIGN:center">2</P>
<P class="Chart" style="LEFT:170px;POSITION:absolute;TOP:380px;HEIGHT:5.6pt;TEXT-ALIGN:center">3</P>
<P class="Chart" style="LEFT:220px;POSITION:absolute;TOP:380px;HEIGHT:5.6pt;TEXT-ALIGN:center">4</P>
<P class="Chart" style="LEFT:270px;POSITION:absolute;TOP:380px;HEIGHT:5.6pt;TEXT-ALIGN:center">5</P>
<P class="Chart" style="LEFT:320px;POSITION:absolute;TOP:380px;HEIGHT:5.6pt;TEXT-ALIGN:center">6</P>
<P class="Chart" style="LEFT:365px;POSITION:absolute;TOP:380px;HEIGHT:5.6pt;TEXT-ALIGN:center">7</P>
<P class="Chart" style="LEFT:415px;POSITION:absolute;TOP:380px;HEIGHT:5.6pt;TEXT-ALIGN:center">8</P>
<P class="Chart" style="LEFT:460px;POSITION:absolute;TOP:380px;HEIGHT:5.6pt;TEXT-ALIGN:center">9</P>
<P class="Chart" style="LEFT:505px;POSITION:absolute;TOP:380px;HEIGHT:5.6pt;TEXT-ALIGN:center">10</P>
<P class="Chart" style="LEFT:555px;POSITION:absolute;TOP:380px;HEIGHT:5.6pt;TEXT-ALIGN:center">11</P>
<P class="Chart" style="LEFT:605px;POSITION:absolute;TOP:380px;HEIGHT:5.6pt;TEXT-ALIGN:center">12</P>
</v:group>
</center><br>
畫圖表的準備工作已經全部做好了，現在就差數據了。有了數據，把數據灌輸到 PolyLine 里面，曲線就顯示出來了。現在我們使用一些假數據，看看上面的效果如何！<button onclick="poly1.style.visibility=''">點這里顯示曲線</button><br>
本節例子比較多，請訪問下頁。
<p align="right">第 <strong style="color:red">1</strong> <a href="step312.html">2</a> <a href="step313.html">3</a> 頁</p>
</div>
</td>
</tr>
<tr>
<td class="title">
<p align="right"><a href="javascript:self.scrollTo(0,0)">Top</a></p>
<a href="index.html">返回目錄</a><br>
上一節:<a href="step23.html">給VML增加事件</a><br>
下一節:<a href="step32.html">矢量地圖</a>
</td>
</tr>
</table>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -