怎样画时间曲线图？ - ASP及.net - 5D互动论坛 - 五维多媒体

您还没有登录,现在登录 | 注册5D通行证

5D 博客新控制面板,操作更简单!

首页

资讯

作品

教程

博客

论坛

论坛首页规章制度搜索帮助

» 互动论坛 » ASP及.net » 怎样画时间曲线图？

发起主题

回复主题

跳转到：

每页显示15条 1/1<<<1>>

	主题: 怎样画时间曲线图？
gation 职务：普通成员等级：2 金币：1.0 发贴：251	引用 #12004/5/28 15:42:44 要画一个时间曲线图，dd和time 2个数组分别作为x,y轴请问怎么做
缺缺职务：管理员等级：8 金币：41.0 发贴：9620	引用 #22004/5/28 16:38:12 VML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>Thinking in VML</title> </head> <STYLE> v\:* { BEHAVIOR: url(#default#VML) } .memo{ border-top: solid black; border-right:solid black; border-bottom:solid black; border-left:solid black; padding-top:10px; padding-left:10px; padding-bottom:10px; padding-right:10px; border-width:1px; background-color:#EFEFEF; font-size:9pt; font-family:宋体; } .memo1{ padding-top:3px; padding-left:3px; padding-bottom:3px; padding-right:3px; border-width:1px; background-color:#EFEFEF; font-size:9pt; font-family:宋体; } .ddd{ border-top: solid silver; border-right:solid silver; border-bottom:solid silver; border-left:solid silver; border-width:1px; } .title{ padding-top:5px; padding-left:10px; padding-bottom:5px; padding-right:10px; font-size:10pt; font-family:宋体; } A{ font-size:9pt; color: blue; text-decoration:none; } A:hover{color:red;text-decoration:underline;} </STYLE> <script> function drawLines() { var count=0;//画横坐标 for(var i=0;i<=60;i++){ var px=200+73i; 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-73i; 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++; } } function drawLinesX(m) { count=0; //画横坐标 var textPoint=1; for(var i=1;i<=10;i++){ var py=2750-i245; var strTo=m+" "+py; var newLine = document.createElement("<v:line from='200 "+py+"' to='"+strTo+"' style='position:absolute;z-index:8'></v:line>"); group2.insertBefore(newLine); if(count%2!=0){ var newStroke = document.createElement("<v:stroke color='#c0c0c0'>"); newLine.insertBefore(newStroke); var newShape= document.createElement("<v:shape style='position:absolute;left:0;top:"+(py-50)+";WIDTH:1000px;HEIGHT:200px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>") group2.insertBefore(newShape); var newText = document.createElement("<v:textbox id='tx"+textPoint+"' inset='3pt,0pt,3pt,0pt' style='font-size:10pt;v-text-anchor:bottom-right-baseline'></v:textbox>"); newShape.insertBefore(newText); newText.innerText=textPoint; textPoint++; } else { var newStroke = document.createElement("<v:stroke dashstyle='dot' color='black'/>"); newLine.insertBefore(newStroke); } count++; } } function drawLinesY(n) { var textPoint=1; for(var i=1;i<=n;i++){ var py=170+i300; var newLine = document.createElement("<v:line from='"+py+" 2700' to='"+py+" 2750' style='position:absolute;z-index:8'></v:line>"); group2.insertBefore(newLine); var newStroke = document.createElement("<v:stroke color='black'>"); newLine.insertBefore(newStroke); var newShape= document.createElement("<v:shape style='position:absolute;left:"+(py-50)+";top:2750;WIDTH:200px;HEIGHT:150px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>") group2.insertBefore(newShape); var newText = document.createElement("<v:textbox id='ty"+textPoint+"' inset='3pt,0pt,3pt,0pt' style='font-size:9pt;v-text-anchor:bottom-right-baseline'></v:textbox>"); newShape.insertBefore(newText); newText.innerHTML=textPoint; textPoint++; } } function drawBar(v,t) { var h=v245-50; var px=2750-v245; var py=170+t300; var newShape= document.createElement("<v:rect style='position:absolute;left:"+py+";top:"+px+";WIDTH:190px;HEIGHT:"+h+"px;z-index:9' coordsize='21600,21600' fillcolor='blue'></v:rect>") group2.insertBefore(newShape); } function drawBars() { drawBar(6,1); drawBar(5,2); drawBar(6,3); drawBar(8,4); drawBar(3,5); drawBar(1,6); drawBar(9,7); drawBar(2,8); drawBar(6,9); drawBar(5,10); drawBar(7,11); drawBar(3,12); } function changeit() { banana.value=100-(parseInt(apple.value)+parseInt(pear.value)); showPie(); } var r=2000; function createPie(sa,ea,color,n) { var fs=Math.PI2(sa/360); var fe=Math.PI2(ea/360); var sx=parseInt(rMath.sin(fs)); var sy=parseInt(-rMath.cos(fs)); var ex=parseInt(rMath.sin(fe)); var ey=parseInt(-rMath.cos(fe)); var newPie=document.createElement("<v:shape title='"+n+"' style='position:absolute;z-index:8;width:"+2r+";height:"+2r+"' CoordSize='4000,4000' strokeweight='1pt' fillcolor='"+color+"' strokecolor='black' path='m0,0 l "+sx+","+sy+" ar -2000,-2000,2000,2000,"+ex+","+ey+","+sx+","+sy+" l0,0 x e' />"); //var newPie=document.createElement("<v:shape style='position:absolute;z-index:8;left:"+px+";top:"+py+";width:"+2r+";height:"+2r+"' CoordSize='4000,4000' strokeweight='1pt' fillcolor='"+color+"' strokecolor='"+color+"' path='m0,0 l "+sx+","+sy+" ar -2000,-2000,2000,2000,"+ex+","+ey+","+sx+","+sy+" l0,0 x e' />"); pie.insertBefore(newPie); } function showPie() { pie.innerHTML=""; createPie(0,parseInt(banana.value)3.6,"blue","香蕉"); createPie(parseInt(banana.value)3.6,parseInt(banana.value)3.6+parseInt(apple.value)3.6,"red","苹果"); createPie(parseInt(banana.value)3.6+parseInt(apple.value)3.6,360,"green","梨"); } </script> <body onload="drawLines();drawLinesX(4500);drawLinesY(13);changeit()"> <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+73i;(其中200是距离左边的距离) 纵坐标是 py=2800-73i; (因为总共的高度是2800,所以要用减去)现在，把数据转换成坐标变得很容易了。当然这里的 i 是 0,1,2..7 ，也可以是你具体的数据，换算的时候，只需要按照比例得到坐标值，比如说你的纵坐标的价值是从 100，200，300，..700 相应的反应到坐标上就是 px=200+73i<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 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"/> <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">1</P> <P id="p3" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:270px;HEIGHT:5.6pt;TEXT-ALIGN:center">2</P> <P id="p4" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:220px;HEIGHT:5.6pt;TEXT-ALIGN:center">3</P> <P id="p5" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:170px;HEIGHT:5.6pt;TEXT-ALIGN:center">4</P> <P id="p6" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:120px;HEIGHT:5.6pt;TEXT-ALIGN:center">5</P> <P id="p7" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:75px;HEIGHT:5.6pt;TEXT-ALIGN:center">6</P> <P id="p8" class="Chart" style="LEFT:5px;WIDTH:11.9pt;POSITION:absolute;TOP:25px;HEIGHT:5.6pt;TEXT-ALIGN:center">7</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> </center><br>     画图表的准备工作已经全部做好了，现在就差数据了。有了数据，把数据灌输到 PolyLine 里面，曲线就显示出来了。现在我们使用一些假数据，看看上面的效果如何！<button onclick="poly1.style.visibility=''">点这里显示曲线</button><br>     本节例子比较多，请访问下页。 </div> </td> </tr> </table> <table align="center"> <tr> <td align="center" class="title"><strong>数据图表二</strong></td> </tr> <tr> <td > <div class="memo" style="width:700;line-height:23px">     <strong>柱状图</strong>：柱状图是由矩形组成的，量体现在它的高度上。我们还是先画坐标，因为柱状图主要体现它的高度，所以一般只画横坐标线。<br>     <button onclick="drawBars()">显示柱状图</button><br><br> <v:group ID="group2" style="WIDTH:700px;HEIGHT:500px" coordsize="4900,3500"> <v:line from="200,100" to="200,2700" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt"> <v:stroke StartArrow="classic"/> </v:line> <v:line from="200,2700" to="4500,2700" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt"> <v:stroke EndArrow="classic"/> </v:line> <v:rect style="WIDTH:4600px;HEIGHT:2900px" coordsize="21600,21600" fillcolor="white" strokecolor="black"> <v:shadow on="t" type="single" color="silver" offset="4pt,3pt"></v:shadow> </v:rect> <v:shape style="position:absolute;left:50;top:2650;WIDTH:1000px;HEIGHT:200px;z-index:8" coordsize="21600,21600" fillcolor="white"> <v:textbox id="text1" inset="3pt,0pt,3pt,0pt" align="center" style="font-size:10pt;v-text-anchor:bottom-center-baseline">0</v:textbox> </v:shape> </v:group><br>     你可以点右键查看源代码。可以得到一些方法，不过我编写这些的时候，特别是数据和坐标转换还没有找到通用的规律。所以需要耐心去拼凑。你在应用VML做图表的时候，首先生成坐标，然后根据 x ,y 的范围，把横纵坐标轴化分一下，然后就可以根据化分的结果就可以得到 x,y 坐标和值的关系了。<br>     接下来将讲饼图(Pie)。 </div> </td> </tr> </table> <table align="center"> <tr> <td align="center" class="title"><strong>数据图表三</strong></td> </tr> <tr> <td > <div class="memo" style="width:700;line-height:23px">     <strong>饼图(Pie)</strong>：Pie图在 VML 是个比较头痛的问题,可能是我的数学不太好的缘故吧!因为 VML 没有提供直接的 Pie (扇形) 语句,现在要画饼图的话只能自己计算坐标了,这要用到一些三角函数的知识。还要注意的是，JavaScript 的三角函都是以弧度为单位。所以，要把角度转换成弧度。<br>     <font color=red>苹果</font>： <select id="apple" onchange="changeit()"> <option value="10">10% <option value="20">20% <option value="30">30% <option value="40">40% <option value="50">50% </select>   <font color="green">梨</font>： <select id="pear" onchange="changeit()"> <option value="5">5% <option value="10">10% <option value="20">20% <option value="30">30% <option value="40">40% </select>   <font color="blue">香蕉</font>：<input id="banana" type="text" readonly size="2" value="85">%<br><br> <center> <v:group ID="group3" CoordOrig="-3000,-2000" CoordSize="6000,4000" style="width:300;height:200;position:relative"> <v:rect style="position:relative;left:-3000;top:-3000;WIDTH:6000;HEIGHT:6000;" fillcolor="white" strokecolor="black"> <v:shadow on="t" type="single" color="silver" offset="4pt,3pt"></v:shadow> </v:rect> <div id="pie"></div> </v:group> </center><br>     在写这个教程的之前，我还没有亲自画过 Pie 图，以为很简单，一步就可以完成，不过当我真的去画的时候，让我差点一个晚上没有睡觉(目瞪口呆，口水直流)。<br>     我先研究 <a href="http://www.w3.org/TR/NOTE-VML" target="_blank">http://www.w3.org/TR/NOTE-VML</a> 里面有写关于 path 里面的 ae (AngleEllipseTo) 命令(MSDN里面都没有关于这些命令，3w 全部命令都有)。那个命令确实可以很简单的完成，但它有 6 个参数，最后两个参赛很难理解。因为在一些例子中，这两个数非常大，五六位之多。不得其解，不得不放弃这个命令(一个晚上过去了)。<br><br>     CSDN上的网友 emu(ston) 提出的问题，还有他最后完成的 Pie 图，给我了一些启发，他的做法是用 PolyLine 画曲线，这样的方法确实可行，不过如果精度太底，曲线就不平滑了。我发现 path 里面的 ar 命令就是用来画弧线的。问题终于解决了。现在讲讲 ar 命令的使用。<br>     <strong>ar</strong> left,top,right,bottom start(x,y) end(x,y) 共六个参数。前面四个参数分别是整圆的左上角和右下角坐标。这样就确定了弧的范围。后面两个参数是弧的开始坐标和结束坐标。在知道角度和半径的时候，最后两个参数是很好求的。下面的代码可以画一个扇形，sa,ea,用来确定起始角度和结束角度，注意，这里用角度，在函数里面我再把角度换算成弧度的。color 是颜色， n 是一些提示信息：<br><br> <div class="memo"> var r=2000; //半径<br> function createPie(sa,ea,color,n)<br> {<br>   var fs=Math.PI2(sa/360); //角度转换成弧度<br>   var fe=Math.PI2(ea/360);<br>   var sx=parseInt(rMath.sin(fs));<br>   var sy=parseInt(-rMath.cos(fs)); //注意这里有个负号，因为VML的坐标第四像限相当于数学中的第一像限<br>   var ex=parseInt(rMath.sin(fe));<br>   var ey=parseInt(-rMath.cos(fe));<br>   var strPie="<v:shape title='"+<strong>n</strong>+"' style='position:absolute;z-index:8;width:"+2<strong>r</strong>+";height:"+2*<strong>r</strong>+"'"<br>     +" CoordSize='4000,4000' strokeweight='1pt' fillcolor='"+<strong>color</strong>+"'"<br>     +"path='m0,0 l "+<strong>sx</strong>+","+<strong>sy</strong>+" <font color=red>ar -2000,-2000,2000,2000,"+<strong>ex</strong>+","+<strong>ey</strong>+","+<strong>sx</strong>+","+<strong>sy</strong>+"</font> l0,0 x e' />";<br>   var newPie=document.createElement(strPie);<br>   group3.insertBefore(newPie);<br> }<br> </div><br>     数据图表到这里就介绍完了，可能还有其他形式的图表，不过有了前面三个例子，其他的我相信大家都能知道该怎么做的。接下来的一节将介绍 VML 一个应用广泛的矢量地图。 </div> </td> </tr> </table> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
ZooRO 职务：普通成员等级：1 金币：0.0 发贴：78	引用 #32004/5/31 13:11:40 长见识了。要学学vml。
elite_5d 职务：普通成员等级：2 金币：1.0 发贴：330	引用 #42004/6/1 0:14:27 allinhands 这个能从数据库取记录再生成图表吗？？谢谢

每页显示15条 1/1<<<1>>

在回复主题:怎样画时间曲线图？

正文：

下划线

文本颜色

插入链接

建立Google搜索链接

插入图片

引用文本

骄傲的笑

什么?

smile

frown

redface

biggrin

wink

rolleyes

mad

eek

禁止笑脸转换

提示：按 Ctrl+Enter 快速提交

关于我们 | 免责声明 | 合作联系 | 版权信息 | 友情链接 | ICP许可证:浙ICP备05007613号
©1999-2008 5D.cn. 版权所有

百度大联盟认证绿色会员