我想使用 Javascript 在网页上制作折线图。我希望它是动画的，这样当页面加载时，线就会慢慢地“绘制”到图形上。
我已经设法让静态图工作，使用 flot ，但是我不确定如何为其设置动画。
如果让它沿着图形中途画一条线，我的工作就完成了一半，但是当我尝试通过修改数据集来做到这一点时，它修改了结构图表也是如此，以便线条填充 100% 的图表区域。
那么有没有一种方法可以分阶段绘制线数据，这样我就可以将其动画化？
或者，还有其他一些我忽略的 javascript 图形框架吗？
最佳答案
这是一个使用 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>
关于javascript - Javascript 中的动画线图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/953797/