<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 >Top</a></p>
</td>
</tr>
</table>
</body>
</html>