用Javascript写了一个网页上的动态折线图,类似心电图的那种.
其中的画线用到的是我上一篇文章里写的那种方法.
先是简单的Demo页面:
然后是CSS:
div.outer {
width: 402px;
height: 300px;
border: 1px solid #000000;
}
div.inner {
width: 40px;
height: 300px;
float: left;
margin: 0 0;
}
最后是核心的Javascript:
// 起始点的纵坐标
var startPoint;
function startLine() {
startPoint = 0;
// 设定定时器,每秒钟更新一次
var timeLine = setInterval("doLine()",1000);
}
function doLine() {
// 结束点的综坐标,这里以随机数来产生,实际中通过Ajax从后台取
var endPoint = Math.floor(Math.random() * 300);
// 获得大容器
var outer = document.getElementById('outer');
// 大容器中的第一个竖条
var firstInner = outer.getElementsByTagName('div')[0];
// 将第一个竖条中的已有线删除
var linePoint = firstInner.getElementsByTagName('div');
var length = linePoint.length;
for (var i = length-1; i >= 0; i--) {
firstInner.removeChild(linePoint[i]);
}
// 将第一个竖条放到大容器的最后
document.getElementById('outer').appendChild(firstInner);
// 在第一个竖条内画线(画线的方法用的是我上一篇博客里写的)
_jsline.line(0, startPoint, 40, endPoint, firstInner);
// 将这一次的结束点作为下一次的起始点
startPoint = endPoint;
}
实测Firefox5,IE9都是OK的,估计其它浏览器应该也问题不大.
2
顶
4
踩
分享到:
2011-07-03 23:05
浏览 7224
评论