纯JS网页上的动态折线图

来源：互联网发布：win10 1709优化编辑：程序博客网时间：2024/06/03 19:56

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

2 0