纯JS网页上的动态折线图
程序员文章站
2022-07-12 09:36:36
...
用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的,估计其它浏览器应该也问题不大.
上一篇: Normal Matrix
下一篇: C++下扩展卡尔曼类(EKF)的实现