vml怎样做柱状图及曲线图

呵呵，用VML很简单，给你个例子：
<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">数据图表</td>
</tr>
<tr>
<td >
<div class="memo" style="width:700;line-height:23px">
    现在我们来看看VML的一些应用。数据图表可以说是VML的拿手好菜。绘制图表，最重要的步骤是把数据转换成坐标。由于VML是矢量的，
给数据的取值范围有很大的自由度，因为你可以用带小数的坐标值，也可以是非常大的数据做为坐标值。 
    在做图表之前，必须明确一些事情，要把图表看成一个整体，这意味着使用 Group 将 VML 包容起来；x,y 轴是在第四像限里面的；VML的大小由 width,height 决定，而不是由coordsize决定。接下来，让我们看看几个经典的图表。 

    曲线图(走势图)：看起来是曲线，其实细分起来就是一段段小折线组成的。所以我们可以选择PolyLine来做。首先我们来画坐标轴： 
<div class="memo">
<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>
</div> 
    也许你希望显示坐标轴上的刻度，这也很容易实现，我们可以用一个绝对定位的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是坐标值和数据的比例) 
<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"/>
0
1
2
3
4
5
6
7
0
1
2
3
4
5
6
7
8
9
10
11
12
</v:group>
</center> 
    画图表的准备工作已经全部做好了，现在就差数据了。有了数据，把数据灌输到 PolyLine 里面，曲线就显示出来了。现在我们使用一些假数据，看看上面的效果如何！<button onclick="poly1.style.visibility=''">点这里显示曲线</button> 
    本节例子比较多，请访问下页。
第 1 <a href="step312.html">2</a> <a href="step313.html">3</a> 页
</div>
</td>
</tr>
<tr>
<td class="title">
<a href="javascript:self.scrollTo(0,0)">Top</a>
</td>
</tr>
</table>
</body>
</html>

posted on 2006-10-12 11:43 ringnet 阅读(3170) 评论(0) 编辑收藏举报