我想使用 Javascript 在网页上制作折线图。我希望它具有动画效果，以便在页面加载时，线条会慢慢“绘制”到图表上。
我已经使用flot 设法使静态图正常工作，但是我不确定如何对其进行动画处理。
只要让它沿着图表画一条线中途就完成了我的一半工作，但是当我尝试通过修改数据集来做到这一点时，它会修改图形也是如此，使线条填充图形区域的 100%。
那么有没有办法分阶段绘制线条数据，让我可以动画呢？
或者，还有其他一些我忽略的 javascript 图形框架吗？
【问题讨论】：
标签： javascript graph flot animated
这是一个使用 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>
【讨论】：
跳出框框思考（因为我不熟悉浮动框），你可以用一个缓慢后退并显示线条的 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>
【讨论】：
我编写了一个专注于图形动画的库。注意调整大小期间的动画。希望这对您和其他所有人都有帮助！
LYNE.JS
https://github.com/bluejamesbond/Lyne.js/tree/master
GIF 样本
现场样本
http://bluejamesbond.github.io/Lyne.js/
【讨论】：
你可以修改flot.我之前对浮动代码进行了更改。写得还算不错。如果你遇到困难，有一个谷歌小组。
或者你可以学习如何使用 Canvas，这就是 flot 所使用的。
【讨论】：
我也想在我的浮动图表中添加水平线动画，不幸的是没有插件可以做到这一点。
请随意使用我创建的插件来做到这一点：http://www.codicode.com/art/jquery_flot_animator.aspx
【讨论】：
您可以使用 d3js。学习 d3 需要一些时间，但它的力量是巨大且无与伦比的。
https://www.quora.com/How-do-I-learn-D3-js
http://big-elephants.com/2014-06/unrolling-line-charts-d3js/
d3 可视化的几个示例：
【讨论】：
我提供了一系列图表和图表库，它们可以满足您的目的并帮助您创建您喜欢的图表或可视化。看看这篇文章http://shivganesh.com/2015/05/infovizgeek-encyclopedia-for-visualization-tools/
【讨论】：