在Javascript动画线图？ [英] Animated line graph in Javascript?
问题描述
我想要做的使用JavaScript的Web页面上线图。我想这是动画，使页面加载时，该行正在慢慢画上的图形。
I'd like to do a line-graph on a web-page using Javascript. I want it to be animated so that when the page loads, the line is slowly "drawn" onto the graph.
我已经得到了一个静态的图表工作，使用海军报，但是我不能确定如何制作动画。
I've managed to get a static graph working, using flot, however I'm unsure how to animate it.
这将是我一半的完成任务，只是让画一条线的中途的沿着图形，但是当我试图通过修改数据集要做到这一点，它修改的结构图，以及，使该行填充图形面积的100％。
It would be half my job done to just make it draw a line half-way along the graph, but when I try to do this by modifying the data-set, it modifies the structure of the graph as well, so that the line fills 100% of the graph area.
那么，有没有一种方法来绘制阶段行数据，这样我就可以制作动画呢？
So is there a way to draw the line data in stages, so I can animate it?
或者，有一些其他的JavaScript框架图表，我已经忽略了？
Or alternatively, is there some other javascript graphing framework that I've overlooked?
推荐答案
下面是使用海军报一个简单的例子
<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动画线图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
