1. Zuhause
  2. Frage und Antwort
  3. Animierte Liniendiagramm in Javascript?

Animierte Liniendiagramm in Javascript?

2009-06-05 13 views
13

Ich möchte ein Liniendiagramm auf einer Webseite mit Javascript erstellen. Ich möchte, dass es so animiert wird, dass beim Laden der Seite die Linie langsam auf die Grafik "gezeichnet" wird.Animierte Liniendiagramm in Javascript?

Ich habe es geschafft, eine statische Grafik arbeiten zu lassen, mit flot, aber ich bin mir nicht sicher, wie man es animiert.

Es wäre die Hälfte meiner Arbeit erledigt sein, nur es entlang der Kurve, die eine Linie auf halbem Weg machen zu ziehen, aber wenn ich versuche, dies zu tun, indem die Daten-Set ändern, ändert es die Struktur des Graphen als auch , so dass die Linie 100% des Diagrammbereichs ausfüllt.

Also gibt es eine Möglichkeit, die Zeilendaten in Stufen zu zeichnen, damit ich es animieren kann?

Oder alternativ, gibt es einige andere JavaScript-Grafik-Framework, die ich übersehen habe?

Quelle

2009-06-05 Jonathan

Antwort

15

Hier ist ein einfaches Beispiel mit 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>

Quelle

2009-06-05 01:43:02

+2

Uhmm ... Warum habe ich nicht daran gedacht +1 – ichiban

+1

Dieser Code in Aktion: http://jsfiddle.net/uQdyk/ –

1

Sie könnten Flot ändern. Ich habe zuvor Änderungen am Flot-Code vorgenommen. Es ist ziemlich gut geschrieben. Es gibt eine Google-Gruppe, wenn Sie nicht weiterkommen.

Oder Sie könnten gerade lernen, Canvas zu verwenden, die Flot verwendet.

Quelle

2009-06-05 00:50:33 Nosredna

5

Wenn ich über den Tellerrand hinausgehe (da mir die Flot-Box nicht vertraut ist), könnte man den Graphen mit einem div-Element bedecken, das langsam zurückgeht und die Linie anzeigt. Ein div in Javascript zu schrumpfen ist eine triviale Aufgabe, auch ohne Bibliotheken von Drittanbietern.

Edit:

Ich sehe musste, wie einfach es war, so warf ich diese zusammen in etwa 10 Minuten.

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

Quelle

2009-06-05 00:55:27 Joel

+1

Sehr einfach, aber beeindruckend +1 – ichiban

+1

Das ist eine tolle Idee. Das Problem besteht darin, dass das überlagerte Div die Linien im Diagramm verdeckt. Aber hey, es ist viel besser als nichts! – Jonathan

+0

@ Jonathan: Abhängig von der Komplexität Ihres Graphenhintergrunds können Sie möglicherweise einen passenden Hintergrund auf das Overlay div setzen. – Joel

2

Ich habe eine Bibliothek geschrieben, die stark auf Animation von Grafiken konzentriert. Beachten Sie die Animation während der Größenanpassung. Hoffe das hilft dir und allen anderen!

LYNE.JS

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

GIF SAMPLE

enter image description here

LIVE-PROBEN

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

Quelle

2014-01-24 01:20:25 bluejamesbond

Verwandte Themen

 Verwandte Themen