利用vml可以动态生成曲线图，饼图，柱图易如反掌，很简单，功能又强，与css js 都能很好的配合。甚至搞个时时的股票信息也是没啥问题的,配合xmlhttp免刷新网页，效果一定好！
下面是一个显示效果：
下面是网页代码源文件：
<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>
订阅