我想在使用Javascript的網頁上做一個線條圖。我希望它是動畫的，這樣當頁面加載時，這條線就會慢慢地「繪製」到圖上。Javascript中的動畫線條圖？
我已經設法使用flot獲得靜態圖形，但是我不確定如何對它進行動畫處理。
沿着圖形繪製一條線中途這將是我的一半工作，但是當我嘗試通過修改數據集來做到這一點時，它也會修改圖的結構，以便線條填充圖表區域的100％。
那麼有沒有一種方法可以分階段繪製線條數據，這樣我就可以製作動畫了？
或者，還有一些其他的JavaScript圖形框架，我忽略了？
下面是使用海軍報
<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>
你可以修改flot。我之前對flot代碼進行了更改。它寫得很好。如果你陷入困境，有一個谷歌集團。
或者你可以學習如何使用Canvas，這是flot使用的。
在盒子外面思考（因爲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>
一個簡單的例子，我想水平線動畫添加到我的海軍報圖也是如此，可惜沒有插件來做到這一點。
請隨意使用我創建了這樣做的插件：http://www.codicode.com/art/jquery_flot_animator.aspx
我寫了大量專注於圖形的動畫庫。在調整大小時注意動畫。希望這可以幫助你和其他人！
LYNE.JS
https://github.com/bluejamesbond/Lyne.js/tree/master
GIF樣品
LIVE樣品
http://bluejamesbond.github.io/Lyne.js/
您可以使用d3js。學習D3會需要一些時間，但它的力量是巨大的，無與倫比的。
https://www.quora.com/How-do-I-learn-D3-js
http://big-elephants.com/2014-06/unrolling-line-charts-d3js/
D3可視化的幾個例子：
我已經在一系列圖形和圖表圖書館，將成爲把你目的以及幫助您創建t他繪製或形象化你會請。看看這篇文章http://shivganesh.com/2015/05/infovizgeek-encyclopedia-for-visualization-tools/
非常簡單，但令人印象深刻+1 – ichiban 2009-06-05 01:51:02
這是一個了不起的想法。麻煩的是，疊加的div會掩蓋圖表上的線條。但是，嘿，比沒有好多了！ – Jonathan 2009-06-05 02:04:13