Question

我想使用Javascript在网页上做一个线图。我希望它能够被动画化，这样当页面加载时，线条会慢慢“绘制”到图形上。

我设法使用flot获取静态图表，但我不确定如何设置动画。

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

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

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

Answer 1

以下是使用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>

Answer 2

在盒子外思考（因为我不熟悉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>

Answer 3

我编写了一个专注于图形动画的库。请在调整大小时注意动画。希望这对你和其他人有所帮助！

<强> LYNE.JS

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

GIF样本

enter image description here

实时样本

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

Answer 4

你可以修改flot。我之前已经对flot代码进行了更改。它写得很好。如果你遇到问题就有一个google小组。

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

Answer 5

我也希望在我的flot图表中添加水平线动画，遗憾的是没有插件可以执行此操作。

请随意使用我创建的插件来执行此操作：http://www.codicode.com/art/jquery_flot_animator.aspx

Answer 6

您可以使用d3js。学习d3需要一些时间，但它的力量是巨大而无与伦比的。

https://www.quora.com/How-do-I-learn-D3-js

http://big-elephants.com/2014-06/unrolling-line-charts-d3js/

d3可视化的几个例子：

Official d3 Website

Something I've built for an NGO

Answer 7

我已经提供了一系列图表和图表库，可以满足您的需求，并帮助您创建您想要的图表或可视化。看看这篇文章http://shivganesh.com/2015/05/infovizgeek-encyclopedia-for-visualization-tools/

Javascript中的动画线图？

7 个答案: