前端折线图中背景_纯JS网页上的动态折线图

用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

评论