当前位置：首页 → 问答吧 → vml好玩啊

vml好玩啊

时间：2005-08-22

来源：互联网

发到经典没人理，这里也copy一份：）

很简单，功能又强，与css js 都能很好的配合

以下是从教程里改的一段代码，可以用来动态生成曲线图。(时间匆忙，不太精确)

:

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<script>
function go(){
var pos="";
var x="";
var y="";
var ii=0;
for(i=0;i<12;i++){
ii=i+1;
x=195+i*370;
y=2600-document.getElementById("m"+ii).value*100;
pos+=x+","+y+" ";
}
poly1.points.value=pos;
}
x=370;
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>
</head>
<body onload="drawLines()">
<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:block;z-index:9" filled=f strokecolor=red strokeweight=2pt points=""/>
<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">100</P>
<P id="p3" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:270px;HEIGHT:5.6pt;TEXT-ALIGN:center">200</P>
<P id="p4" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:220px;HEIGHT:5.6pt;TEXT-ALIGN:center">300</P>
<P id="p5" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:170px;HEIGHT:5.6pt;TEXT-ALIGN:center">400</P>
<P id="p6" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:120px;HEIGHT:5.6pt;TEXT-ALIGN:center">500</P>
<P id="p7" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:75px;HEIGHT:5.6pt;TEXT-ALIGN:center">600</P>
<P id="p8" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:25px;HEIGHT:5.6pt;TEXT-ALIGN:center">700</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><br>
一月:<input name=m1 size=4 value=1>二月:<input name=m2 size=4 value=2>三月:<input name=m3 size=4 value=3>四月:<input name=m4 size=4 value=4><br>
五月:<input name=m5 size=4 value=5>六月:<input name=m6 size=4 value=6>七月:<input name=m7 size=4 value=7>八月:<input name=m8 size=4 value=8><br>
九月:<input name=m9 size=4 value=9>十月:<input name=m10 size=4 value=10>十一:<input name=m11 size=4 value=11>十二:<input name=m12 size=4 value=12>
<button onclick=go()>ok</button>
</body>
</html>

[ 本帖由 warran 最后编辑于 2005-8-22 19:18 ]

作者: warran 发布时间: 2005-08-22

楼上的强!
<style> 标签里的是什么意思??

作者: zzp2450148 发布时间: 2005-08-24

以v: 开始的标记都将是VML标记
声明一下.

不错,加分!

作者: JSTOP 发布时间: 2005-08-25

呵呵，美洲豹 VML 教程里的图表，只是把曲线改成直线了. --_--

对了, 论坛里很久没见美洲豹他老人家出没了？ JSTOP 上次转发给你
的照片收到了伐？

http://www.itlearner.com/code/vml/step31.html

[ 本帖由 ※潇洒※ 最后编辑于 2005-8-25 22:00 ]

作者: ※潇洒※ 发布时间: 2005-08-25

vml好玩啊

热门阅读

热门下载