Fatal编程技术网

Javascript中的动画线条图？

javascript graph

Javascript中的动画线条图？,javascript,graph,flot,animated,Javascript,Graph,Flot,Animated,我想用Javascript在网页上绘制一个折线图。我希望它是动画，以便当页面加载时，线慢慢地“绘制”到图形上 我已经设法让一个静态图形工作，使用，但我不知道如何动画它 让它沿着图形的一半画一条线是我工作的一半，但是当我试图通过修改数据集来做到这一点时，它也会修改图形的结构，因此这条线占据了图形区域的100% 那么，有没有一种方法可以分阶段绘制线条数据，这样我就可以制作动画了 或者，还有其他一些我忽略的javascript绘图框架吗？您可以修改flot。我以前对flot代码做过更改。它写得相当好。

我想用Javascript在网页上绘制一个折线图。我希望它是动画，以便当页面加载时，线慢慢地“绘制”到图形上

我已经设法让一个静态图形工作，使用，但我不知道如何动画它

让它沿着图形的一半画一条线是我工作的一半，但是当我试图通过修改数据集来做到这一点时，它也会修改图形的结构，因此这条线占据了图形区域的100%

那么，有没有一种方法可以分阶段绘制线条数据，这样我就可以制作动画了

或者，还有其他一些我忽略的javascript绘图框架吗？

您可以修改flot。我以前对flot代码做过更改。它写得相当好。如果你陷入困境，就会有一个谷歌小组

或者你可以学习如何使用画布，这就是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>


颜色：白色；边框：纯色1px蓝色；顶部：70像素；左：70像素；">
var阶跃=3；
var区间=20；
var cover=document.getElementById（“dvCover”）；
var currentWidth=370；
var currentLeft=70；
setTimeout（函数（）{reduce（）；}，间隔）；
函数reduce（）
{
如果（当前宽度>0）
{
电流宽度-=步长；
电流左+=步进；
cover.style.width=currentWidth+“px”；
cover.style.left=当前左+像素；
setTimeout（函数（）{reduce（）；}，间隔）；
}
其他的
{
cover.style.display=“无”；
}
}
下面是一个使用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>


弗洛特例子
动画Flot示例
$（函数（）{
var linePoints=[[0,3]、[4,8]、[8,5]、[9,13]；
var i=0；
var-arr=[[]]；
var timer=setInterval（函数（）{
arr[0]。推送（线点[i]）；
$.plot（$（“#占位符”），arr）；
i++；
如果（i==线点.长度）
清除间隔（计时器）；
},300);
});
我也想将水平线动画添加到我的flot图表中，不幸的是，没有插件可以做到这一点

请随意使用我创建的插件：

我编写了一个库，主要关注图形动画。请注意调整大小时的动画。希望这对您和其他人都有帮助

LYNE.JS

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

http://bluejamesbond.github.io/Lyne.js/
GIF样本

活样本

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

http://bluejamesbond.github.io/Lyne.js/
你可以使用d3js。学习d3需要一些时间，但它的威力巨大且无与伦比

d3可视化的几个示例：

我已经介绍了一系列的图表和图表库，它们可以满足您的需要，也可以帮助您创建您喜欢的图表或可视化效果。看看这篇文章吧

非常简单，但令人印象深刻+1这是一个很棒的想法。问题是，叠加的div会模糊图表上的线条。但是，嘿，这太难了总比什么都没有好！@Jonathan:根据你的图形背景的复杂性，你可能可以在叠加div上放置一个匹配的背景。@Joel Potter，是的，我想过这样做，但它不起作用，因为范围可能非常多变。但我想我会去掉线条，只在白色背景上显示情节恩…为什么我没有想到+1呢