纯JS网页上的动态折线图

用Javascript写了一个网页上的动态折线图,类似心电图的那种.

其中的画线用到的是我上一篇文章里写的那种方法.

http://redstarofsleep.iteye.com/blog/1109116

先是简单的Demo页面:

<div class="outer" id="outer">
		<div class="inner"></div>
		<div class="inner"></div>
		<div class="inner"></div>
		<div class="inner"></div>
		<div class="inner"></div>
		<div class="inner"></div>
		<div class="inner"></div>
		<div class="inner"></div>
		<div class="inner"></div>
		<div class="inner"></div>
	</div>
	<input type="button" value="start" onclick="startLine();"></input>

 

然后是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的,估计其它浏览器应该也问题不大.