1. casa
  2. Domanda e risposta
  3. Grafico a linee animato in Javascript?

Grafico a linee animato in Javascript?

2009-06-05 18 views
13

Mi piacerebbe fare un grafico a linee su una pagina web usando Javascript. Voglio che sia animato in modo che quando la pagina viene caricata, la linea venga lentamente "disegnata" sul grafico.Grafico a linee animato in Javascript?

Sono riuscito a far funzionare un grafico statico, utilizzando flot, tuttavia non sono sicuro come animarlo.

Sarebbe metà del mio lavoro fatto per rendere proprio questo tracciare una linea metà lungo il grafico, ma quando provo a fare questo modificando il set di dati, si modifica la struttura del grafico pure , in modo che la linea riempia il 100% dell'area del grafico.

Quindi c'è un modo per disegnare i dati della linea in più fasi, quindi posso animarlo?

O in alternativa, c'è qualche altro framework di grafica javascript che ho trascurato?

fonte

2009-06-05 Jonathan

risposta

15

Ecco un semplice esempio utilizzando 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>

fonte

2009-06-05 01:43:02

+2

Uhmm ... Perché non ci ho pensato +1 – ichiban

+1

Questo codice in azione: http://jsfiddle.net/uQdyk/ –

1

È possibile modificare il flottaggio. Ho già apportato modifiche al codice flot. È abbastanza ben scritto. C'è un gruppo di google se rimani bloccato.

Oppure potresti semplicemente imparare a usare Canvas, che è ciò che usa flot.

fonte

2009-06-05 00:50:33 Nosredna

5

Pensare fuori dagli schemi (dal momento che la scatola che è flottante non mi è familiare), potresti semplicemente coprire il grafico con un div che rallenta lentamente e visualizza la linea. Ridurre un div in javascript è un compito banale anche senza librerie di terze parti.

Edit:

ho dovuto vedere quanto fosse facile, così ho buttato questo insieme in circa 10 minuti.

<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>

fonte

2009-06-05 00:55:27 Joel

+1

Molto semplice, ma impressionante +1 – ichiban

+1

Questa è un'idea impressionante. Il problema è che il div sovrapposto oscurerebbe le linee sul grafico. Ma hey, è molto meglio di niente! – Jonathan

+0

@ Jonathan: A seconda della complessità dello sfondo dei tuoi grafici, potresti essere in grado di inserire uno sfondo corrispondente sul div overlay. – Joel

2

Ho scritto una libreria che si concentra fortemente sul animazione dei grafici. Notare l'animazione durante il ridimensionamento. Spero che questo aiuti te e tutti gli altri!

LYNE.JS

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

GIF CAMPIONE

enter image description here

CAMPIONI LIVE In

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

fonte

2014-01-24 01:20:25 bluejamesbond

Problemi correlati

 Problemi correlati