1. Inicio
  2. Pregunta y respuesta
  3. Gráfico de líneas animadas en Javascript?

Gráfico de líneas animadas en Javascript?

2009-06-05 20 views
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.Gráfico de líneas animadas en Javascript?

He logrado obtener un gráfico estático trabajando, usando flot, sin embargo no estoy seguro de cómo animarlo.

Sería la mitad de mi trabajo de hacer sólo se dibuja una línea a medio camino lo largo del gráfico, pero cuando trato de hacerlo modificando el conjunto de datos, se modifica la estructura de la gráfica, así , de modo que la línea llene el 100% del área del gráfico.

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

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

Fuente

2009-06-05 Jonathan

Respuesta

15

Aquí está un ejemplo sencillo 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>

Fuente

2009-06-05 01:43:02

+2

Uhmm ... ¿Por qué no pensé en eso +1 – ichiban

+1

Este código en acción: http://jsfiddle.net/uQdyk/ –

1

Puede 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 puede aprender a usar Canvas, que es lo que usa flot.

Fuente

2009-06-05 00:50:33 Nosredna

5

Pensando fuera de la caja (ya que la caja 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:

que tenía que ver lo fácil que era, así que tiró esto juntos 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>

Fuente

2009-06-05 00:55:27 Joel

+1

Muy simple, pero impresionante +1 – ichiban

+1

Esa es una idea genial. El problema es que el div superpuesto oscurecería las líneas del gráfico. Pero bueno, ¡es mucho mejor que nada! – Jonathan

+0

@Jonathan: Dependiendo de la complejidad del fondo de sus gráficos, es posible que pueda poner un fondo coincidente en el div superpuesto. – Joel

2

He escrito una biblioteca que se centra en gran medida en la animación de gráficos. Observe la animación durante el cambio de tamaño. Espero que esto te ayude a ti y a todos los demás.

LYNE.JS

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

GIF MUESTRA

enter image description here

muestras vivas

http://bluejamesbond.github.io/Lyne.js/

Fuente

2014-01-24 01:20:25 bluejamesbond

Cuestiones relacionadas

 Cuestiones relacionadas