Javascript中的动画线图？

Question

Javascript中的动画线图？

Jon*_*han 13 javascript graph flot animated

我想使用Javascript在网页上做一个线图.我希望它是动画的,这样当页面加载时,线条会慢慢地"绘制"到图形上.

我已经设法使用flot获得静态图,但是我不确定如何设置动画.

这将是我一半的完成任务,只是让画一条线中途沿着图形,但是当我试图通过修改数据集要做到这一点,它修改图的结构一样,所以该行填充100%的图形区域.

那么有没有办法分阶段绘制线数据,所以我可以动画它？

或者,是否有一些我忽略的其他javascript图形框架？

Answer 1

Jos*_*lio 15

这是一个使用Flot的简单示例

<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>

Run Code Online (Sandbox Code Playgroud)

嗯......为什么我没想到那个+1 (2认同)

Answer 2

Joe*_*oel 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，4 月前
查看次数：	11017 次
最近记录：	10 年，1 月前