VML+javascript生成曲线图

技术文章

VML+javascript生成曲线图

时间：2008-08-26 点击：1705

<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>

网页简体繁体切换

鼠标跟随提示说明

用CSS实现的中英文双语导航菜单

兼容FF/IE7的可移动弹出层，值得收藏

VML+javascript生成曲线图

> 返回

地址：上海市普陀区胶州路941号长久商务中心电话： QQ：