1. 首页
  2. 问答
  3. Javascript中的动画线条图？

Javascript中的动画线条图？

2009-06-05 145 views
13

我想在使用Javascript的网页上做一个线条图。我希望它是动画的，这样当页面加载时，这条线就会慢慢地“绘制”到图上。Javascript中的动画线条图？

我已经设法使用flot获得静态图形，但是我不确定如何对它进行动画处理。

沿着图形绘制一条线中途这将是我的一半工作，但是当我尝试通过修改数据集来做到这一点时，它也会修改图的结构，以便线条填充图表区域的100％。

那么有没有一种方法可以分阶段绘制线条数据，这样我就可以制作动画了？

或者，还有一些其他的JavaScript图形框架，我忽略了？

来源

2009-06-05 Jonathan

回答

15

下面是使用海军报

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Flot Examples</title> 
<link href="layout.css" rel="stylesheet" type="text/css"></link> 
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]--> 
<script language="javascript" type="text/javascript" src="../jquery.js"></script> 
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> 
</head> 
<body> 
<h1>Animated Flot Example</h1> 
<div id="placeholder" style="width:600px;height:300px;"></div> 
<script id="source" language="javascript" type="text/javascript"> 
$(function() { 
    var linePoints = [[0, 3], [4, 8], [8, 5], [9, 13]]; 
    var i = 0; 
    var arr = [[]]; 
    var timer = setInterval(function(){ 
    arr[0].push(linePoints[i]); 
    $.plot($("#placeholder"), arr); 
    i++; 
    if(i === linePoints.length) 
     clearInterval(timer); 
    },300); 
}); 
</script> 
</body> 
</html>

来源

2009-06-05 01:43:02

1

你可以修改flot。我之前对flot代码进行了更改。它写得很好。如果你陷入困境，有一个谷歌集团。

或者你可以学习如何使用Canvas，这是flot使用的。

来源

2009-06-05 00:50:33 Nosredna

5

在盒子外面思考（因为flot盒子对我来说是陌生的），您可以用一个缓慢后退并显示线条的div覆盖图表。即使没有第三方库，在JavaScript中缩小div也是一项简单的任务。

编辑：

我要看看是多么容易，所以我在大约10分钟一起扔了这一点。

<html> 
<head> 
</head> 
<body> 

<div style="width:480px;height:480px;position:relative;"> 
<img onload="setTimeout(function(){reduce();}, interval);" src="http://images.freshmeat.net/editorials/r_intro/images/line-graph-1.jpg" /> 
<div id="dvCover" style="position:absolute;width:370px;height:320px;background-color:white;border:solid 1px white;top:70px;left:70px;"></div>color:white;border:solid 1px blue;top:70px;left:70px;"></div> 
</div> 

<script type="text/javascript"> 
var step = 3; 
var interval = 20; 
var cover = document.getElementById("dvCover"); 
var currentWidth = 370; 
var currentLeft = 70; 
setTimeout(function(){reduce();}, interval); 

function reduce() 
{ 
    if (currentWidth > 0) 
    { 
     currentWidth -= step; 
     currentLeft += step; 
     cover.style.width = currentWidth + "px"; 
     cover.style.left = currentLeft + "px"; 

     setTimeout(function(){reduce();}, interval); 
    } 
    else 
    { 
     cover.style.display = "none"; 
    } 
} 
</script> 

</body> 
</html>

来源

2009-06-05 00:55:27 Joel

+1

非常简单，但令人印象深刻+1 – ichiban 2009-06-05 01:51:02

+1

这是一个了不起的想法。麻烦的是，叠加的div会掩盖图表上的线条。但是，嘿，比没有好多了！ – Jonathan 2009-06-05 02:04:13

2

我写了大量专注于图形的动画库。在调整大小时注意动画。希望这可以帮助你和其他人！

LYNE.JS

https://github.com/bluejamesbond/Lyne.js/tree/master

GIF样品

enter image description here

LIVE样品

http://bluejamesbond.github.io/Lyne.js/

来源

2014-01-24 01:20:25 bluejamesbond

相关问题

 相关问题