?? step312.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 drawLinesX(m)
{
count=0; //畫橫坐標
var textPoint=1;
for(var i=1;i<=10;i++){
var py=2750-i*245;
var strTo=m+" "+py;
var newLine = document.createElement("<v:line from='200 "+py+"' to='"+strTo+"' style='position:absolute;z-index:8'></v:line>");
group1.insertBefore(newLine);
if(count%2!=0){
var newStroke = document.createElement("<v:stroke color='#c0c0c0'>");
newLine.insertBefore(newStroke);
var newShape= document.createElement("<v:shape style='position:absolute;left:0;top:"+(py-50)+";WIDTH:1000px;HEIGHT:200px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>")
group1.insertBefore(newShape);
var newText = document.createElement("<v:textbox id='tx"+textPoint+"' inset='3pt,0pt,3pt,0pt' style='font-size:10pt;v-text-anchor:bottom-right-baseline'></v:textbox>");
newShape.insertBefore(newText);
newText.innerText=textPoint;
textPoint++;
}
else
{
var newStroke = document.createElement("<v:stroke dashstyle='dot' color='black'/>");
newLine.insertBefore(newStroke);
}
count++;
}
}
function drawLinesY(n)
{
var textPoint=1;
for(var i=1;i<=n;i++){
var py=170+i*300;
var newLine = document.createElement("<v:line from='"+py+" 2700' to='"+py+" 2750' style='position:absolute;z-index:8'></v:line>");
group1.insertBefore(newLine);
var newStroke = document.createElement("<v:stroke color='black'>");
newLine.insertBefore(newStroke);
var newShape= document.createElement("<v:shape style='position:absolute;left:"+(py-50)+";top:2750;WIDTH:200px;HEIGHT:150px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>")
group1.insertBefore(newShape);
var newText = document.createElement("<v:textbox id='ty"+textPoint+"' inset='3pt,0pt,3pt,0pt' style='font-size:9pt;v-text-anchor:bottom-right-baseline'></v:textbox>");
newShape.insertBefore(newText);
newText.innerHTML=textPoint;
textPoint++;
}
}
function drawBar(v,t)
{
var h=v*245-50;
var px=2750-v*245;
var py=170+t*300;
var newShape= document.createElement("<v:rect style='position:absolute;left:"+py+";top:"+px+";WIDTH:190px;HEIGHT:"+h+"px;z-index:9' coordsize='21600,21600' fillcolor='blue'></v:rect>")
group1.insertBefore(newShape);
}
function drawBars()
{
drawBar(6,1);
drawBar(5,2);
drawBar(6,3);
drawBar(8,4);
drawBar(3,5);
drawBar(1,6);
drawBar(9,7);
drawBar(2,8);
drawBar(6,9);
drawBar(5,10);
drawBar(7,11);
drawBar(3,12);
}
</script>
<body onload="drawLinesX(4500);drawLinesY(13)">
<table align="center">
<tr>
<td align="center" class="title"><strong>數(shù)據(jù)圖表</strong></td>
</tr>
<tr>
<td >
<div class="memo" style="width:700;line-height:23px">
<strong>柱狀圖</strong>：柱狀圖是由矩形組成的，量體現(xiàn)在它的高度上。我們還是先畫坐標，因為柱狀圖主要體現(xiàn)它的高度，所以一般只畫橫坐標線。<br>
<button onclick="drawBars()">顯示柱狀圖</button><br><br>
<v:group ID="group1" style="WIDTH:700px;HEIGHT:500px" coordsize="4900,3500">
<v:line from="200,100" to="200,2700" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
<v:stroke StartArrow="classic"/>
</v:line>
<v:line from="200,2700" to="4500,2700" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
<v:stroke EndArrow="classic"/>
</v:line>
<v:rect style="WIDTH:4600px;HEIGHT:2900px" coordsize="21600,21600" fillcolor="white" strokecolor="black">
<v:shadow on="t" type="single" color="silver" offset="4pt,3pt"></v:shadow>
</v:rect>
<v:shape style="position:absolute;left:50;top:2650;WIDTH:1000px;HEIGHT:200px;z-index:8" coordsize="21600,21600" fillcolor="white">
<v:textbox id="text1" inset="3pt,0pt,3pt,0pt" align="center" style="font-size:10pt;v-text-anchor:bottom-center-baseline">0</v:textbox>
</v:shape>
</v:group><br>
你可以點右鍵查看源代碼。可以得到一些方法，不過我編寫這些的時候，特別是數(shù)據(jù)和坐標轉(zhuǎn)換還沒有找到通用的規(guī)律。所以需要耐心去拼湊。你在應用VML做圖表的時候，首先生成坐標，然后根據(jù) x ,y 的范圍，
把橫縱坐標軸化分一下，然后就可以根據(jù)化分的結(jié)果就可以得到 x,y 坐標和值的關(guān)系了。<br>
接下來將講餅圖(Pie)。
<p align="right">第 <a href="step31.html">1</a> <strong style="color:red">2</strong> <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>
上一節(jié):<a href="step23.html">給VML增加事件</a><br>
下一節(jié):<a href="step32.html">矢量地圖</a>
</td>
</tr>
</table>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -