以下是我使用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];
}
}
[返回] 中文XML论坛 - 专业的XML技术讨论区 →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → 一个简单的SVG实时曲线图示例
(订阅本版)
2008/8/1 11:43:00
新浪微博
一个简单的SVG实时曲线图示例
