13

我想使用 Javascript 在网页上制作折线图。我希望它具有动画效果，以便在页面加载时，线条会慢慢“绘制”到图表上。

我已经设法使用flot使静态图正常工作，但是我不确定如何对其进行动画处理。

让它沿着图的中途画一条线就完成了我的一半工作，但是当我尝试通过修改数据集来做到这一点时，它也会修改图的结构，以便线条填充100% 的图形区域。

那么有没有办法分阶段绘制线数据，以便我可以对其进行动画处理？

或者，是否还有其他一些我忽略的 javascript 图形框架？

4

7 回答 7

15

这是一个使用 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>
于 2009-06-05T01:43:02.930 回答
5

跳出框框思考（因为我不熟悉 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>
于 2009-06-05T00:55:27.660 回答
3

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

LYNE.JS

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

GIF 样本

在此处输入图像描述

现场样品

http://bluejamesbond.github.io/Lyne.js/
于 2014-01-24T01:20:25.473 回答
1

你可以修改浮点数。我之前对浮动代码进行了更改。写得还算不错。如果你遇到困难，有一个谷歌小组。

或者你可以学习如何使用画布，这就是 flot 使用的。

于 2009-06-05T00:50:33.847 回答
0

我也想在我的图表中添加水平线动画，不幸的是没有插件可以做到这一点。

请随意使用我创建的插件来做到这一点：http: //www.codicode.com/art/jquery_flot_animator.aspx

于 2013-10-15T02:26:38.623 回答
0

您可以使用 d3js。学习 d3 需要一些时间，但它的力量是巨大的和无与伦比的。

https://www.quora.com/How-do-I-learn-D3-js

http://big-elephants.com/2014-06/unrolling-line-charts-d3js/

d3 可视化的几个示例：

d3官方网站

我为非政府组织打造的东西

于 2015-09-24T07:52:26.057 回答
0

我已经提供了一系列图形和图表库，它们可以满足您的目的，并帮助您创建您喜欢的图表或可视化。看看这篇文章http://shivganesh.com/2015/05/infovizgeek-encyclopedia-for-visualization-tools/

于 2015-09-24T09:33:40.897 回答