Gráfico de líneas animadas en Javascript?

votos
13

Me gustaría hacer un gráfico de línea en una página web usando Javascript. Quiero que esté animado para que cuando la página se cargue, la línea se dibuje lentamente en el gráfico.

Logré hacer funcionar un gráfico estático, usando flot , sin embargo no estoy seguro de cómo animarlo.

Haría la mitad de mi trabajo simplemente dibujar una línea a la mitad del gráfico, pero cuando trato de hacerlo modificando el conjunto de datos, también modifica la estructura del gráfico, de modo que la línea se llene 100% del área del gráfico.

Entonces, ¿hay alguna manera de dibujar los datos de línea por etapas, para poder animarlo?

O, alternativamente, ¿hay algún otro marco de gráficos de javascript que he pasado por alto?

Publicado el 04/06/2009 a las 23:48
fuente por usuario
En otros idiomas...                            


7 respuestas

votos
1

Puedes modificar flot He hecho cambios en el código de flot antes. Está bastante bien escrito. Hay un grupo de google si te quedas atascado.

O simplemente podrías aprender a usar Canvas, que es lo que usa flot.

Respondida el 04/06/2009 a las 23:50
fuente por usuario

votos
5

Pensando fuera de la caja (dado que el cuadro que es flot no me es familiar), podría simplemente cubrir el gráfico con un div que desaparece lentamente y muestra la línea. Reducir un div en javascript es una tarea trivial incluso sin bibliotecas de terceros.

Editar:

Tenía que ver lo fácil que era, así que tiré todo esto en unos 10 minutos.

<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>
Respondida el 04/06/2009 a las 23:55
fuente por usuario

votos
15

Aquí hay un ejemplo simple usando 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>
Respondida el 05/06/2009 a las 00:43
fuente por usuario

votos
0

Quería añadir animaciones de línea horizontal a mis cartas Flot también, por desgracia no hay plugin para hacer esto.

siento favor de utilizar el plugin que he creado para hacer eso: http://www.codicode.com/art/jquery_flot_animator.aspx

Respondida el 15/10/2013 a las 01:26
fuente por usuario

votos
2

He escrito una biblioteca que se centra en gran medida en la animación de gráficos. Observe la animación durante redimensiona. Espero que esto le ayuda y todos los demás!

LYNE.JS

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

MUESTRA GIF

introducir descripción de la imagen aquí

MUESTRAS REALES

http://bluejamesbond.github.io/Lyne.js/
Respondida el 23/01/2014 a las 23:20
fuente por usuario

votos
0

Es posible utilizar d3js. Aprender d3 llevará algún tiempo, pero es decir, el poder enorme e incomparable.

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

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

Unos pocos ejemplos de visualizaciones D3:

d3 Página Web Oficial

Algo que he construido para una ONG

Respondida el 24/09/2015 a las 03:52
fuente por usuario

votos
0

He puesto a través de una serie de gráficos y Bibliotecas Gráfico que servir a su propósito, así como ayudar a crear la tabla o de la visualización que le complacer. Echar un vistazo a este artículo http://shivganesh.com/2015/05/infovizgeek-encyclopedia-for-visualization-tools/

Respondida el 24/09/2015 a las 05:33
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more