-- 作者:zpjdgp888
-- 发布时间:8/1/2008 11:43:00 AM
-- 一个简单的SVG实时曲线图示例
以下是我使用SVG实现一个实时曲线图的代码,大致思路是这样的:所以的线段使用line,定时将x1和x2的值向左移 ,将超出左边边界的线条剔除,再在最右边添加新的线段。 实际中发现,当曲线比较多时,比如例子中,共计8条曲线,每条曲线由600条线段组成,也就是一共4800线段,这 么多线段一起左移,很是耗费系统资源,我的Corel2 4500的CPU每次能占到20%, 所以请教下各位,是不是我的思路有问题? 共计3个文件,trend.htm,trend.svg,lib.js trend.htm代码: <html> <head> <script type='text/javascript' src='lib.js'></script> <title>实时曲线图</title> </head> <body bgcolor="#b1d4f0"> <embed src='trend.svg' width='1300' height='600' type="image/svg+xml"> </body> </html> trend.svg代码: <svg contentScriptType="text/ecmascript" zoomAndPan="magnify" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:rtda="http://www.itris.fr/2003/animation" onload="init(evt)" contentStyleType="text/css" version="1.0" width="1300" preserveAspectRatio="none" viewBox="0 0 1300 600" height="600" xmlns="http://www.w3.org/2000/svg"> <defs/> </svg> lib.js代码: //基本的SVG定义---------------------------------- var svgDoc; var svgRoot; var svgns="http://www.w3.org/2000/svg"; var svgxlinkns="http://www.w3.org/2000/xlink/namespace/"; //----------------------------------------------- //其他定义--------------------------------------- var rdwid=1300; var rdhei=600; var maxLineNum=600;//600条小线段 var trendStrokeArray=new Array("#ff0000", "#00ff00", "#0000ff", "#ffd700", "#ff00ff", "#00ffff", "#8b0000", "#000000"); var TrendNum=8;//曲线条数为8 var TrendLineArray=new Array(TrendNum); var xoffset=(rdwid-100)/maxLineNum; var x1, x2; var y1=new Array(TrendNum); var y2=new Array(TrendNum); //----------------------------------------------- function init(evt) {//init function svgDoc=evt.target.ownerDocument; svgRoot=svgDoc.documentElement; initLine(); window.setInterval("rttrend()", 1000); } function initLine() {//初始化 var newElem, i, k; newElem=svgDoc.createElement("rect"); newElem.setAttribute("style", "stroke:#000000;stroke-width:2;fill:#ffffff;"); newElem.setAttribute("x", "50"); newElem.setAttribute("y", "50"); newElem.setAttribute("width", rdwid-100); newElem.setAttribute("height", rdhei-100); svgRoot.appendChild(newElem); for(i=0; i<TrendNum; i++) { TrendLineArray[i]=svgDoc.createElement("g"); TrendLineArray[i].setAttribute("stroke", trendStrokeArray[i]); TrendLineArray[i].setAttribute("stroke-width", 1); svgRoot.appendChild(TrendLineArray[i]); x1=50; y1[i]=550-60*i; for(k=0; k<maxLineNum; k++) { x2=x1+xoffset; y2[i]=y1[i]-1; if(y2[i] < (550-60*(i+1))+10) y2[i]=550-60*i; newElem=svgDoc.createElement("line"); newElem.setAttribute("x1", x1); newElem.setAttribute("x2", x2); newElem.setAttribute("y1", y1[i]); newElem.setAttribute("y2", y2[i]); TrendLineArray[i].appendChild(newElem); x1=x2; y1[i]=y2[i]; } } } function rttrend() { var i, k, tmpElem=null, newElem, tmpx; var nodes; var bFlag=false; for(i=0; i<TrendNum; i++) { //所有线条左移 bFlag=false; nodes=TrendLineArray[i].getChildNodes(); for(k=0; k<nodes.length; k++) { child=nodes.item(k); if(child.nodeName == "line") { tmpx=parseFloat(child.getAttribute("x1")); child.setAttribute("x1", tmpx-xoffset); child.setAttribute("x2", tmpx); if(!bFlag) { bFlag=true; if(tmpx < 50+xoffset/2) tmpElem=child; } } } //删除最左边超界的曲线 if(tmpElem != null) TrendLineArray[i].removeChild(tmpElem); //在结尾添加曲线 newElem=svgDoc.createElement("line"); x1=50+xoffset*(maxLineNum-1); x2=x1+xoffset; newElem.setAttribute("x1", x1); newElem.setAttribute("x2", x2); y2[i]=y1[i]-1; if(y2[i] < (550-60*(i+1))+10) y2[i]=550-60*i; newElem.setAttribute("y1", y1[i]); newElem.setAttribute("y2", y2[i]); TrendLineArray[i].appendChild(newElem); y1[i]=y2[i]; } }
|