Animiertes Liniendiagramm in Javascript?

Ich möchte gerne ein line-graph, der auf einer web-Seite mit Javascript. Ich will, dass es animiert werden, so dass, wenn die Seite geladen ist, ist die Linie langsam "gezogen" in das Diagramm.

Habe ich es geschafft, eine statische Grafik-arbeiten, mit flotaber ich bin nicht sicher, wie zu animieren.

Wäre es die Hälfte meiner Arbeit erledigt, dass es einfach zeichnen Sie eine Linie halbem Weg entlang der Grafik, aber wenn ich versuche, dies zu tun durch das ändern der Daten-festlegen, es ändert sich die Struktur des Graphen, so dass die Linie füllt 100% des Diagrammbereichs.

So ist es ein Weg, um die Linie zu zeichnen Daten in Stufen, so kann ich ihn animieren?

Oder alternativ gibt es einige andere javascript-Grafik-framework, das hab ich übersehen?

InformationsquelleAutor der Frage Jonathan | 2009-06-05

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>

InformationsquelleAutor der Antwort Jose Basilio

Denken außerhalb der box (da das Feld flot ist ungewohnt für mich), Sie konnten gerade so über die Grafik mit einem div, die langsam zurückweicht und zeigt die Linie. Verkleinern einer div in javascript ist eine einfache Aufgabe auch ohne third-party-Bibliotheken.

Edit:

Ich hatte, um zu sehen, wie einfach es war, so ich warf das 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>

InformationsquelleAutor der Antwort Joel

2

Ich geschrieben habe, eine Bibliothek, die konzentriert sich stark auf die animation von Grafiken. Beachten Sie die animation während ändert. Hoffe das hilft dir und allen anderen!

LYNE.JS
```
https://github.com/bluejamesbond/Lyne.js/tree/master
```
GIF PROBE

LIVE-SAMPLES
```
http://bluejamesbond.github.io/Lyne.js/
```
InformationsquelleAutor der Antwort bluejamesbond
1

Könnte man ändern flot. Ich habe änderungen an der flot-code vor. Es ist ziemlich gut geschrieben. Gibt es eine google-Gruppe, wenn Sie nicht weiterkommen.

Oder Sie könnten nur lernen, wie Sie mit Leinwand, welche flot verwendet.

InformationsquelleAutor der Antwort Nosredna
0

Wollte ich hinzufügen, dass die horizontale Linie, Animationen, um meine flot charts zu, leider gibt es kein plugin dazu.

bitte fühlen Sie sich frei zu verwenden, das plugin habe ich erstellt, das zu tun : http://www.codicode.com/art/jquery_flot_animator.aspx

InformationsquelleAutor der Antwort Chtiwi Malek
0

Können Sie verwenden, d3js. Lernen d3 wird einige Zeit dauern, aber es macht ie enorm und beispiellos.

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

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

Einige Beispiele von d3 Visualisierungen:

Offiziellen d3-Webseite

Etwas, was ich aufgebaut habe für eine NGO

InformationsquelleAutor der Antwort dorado
0

Habe ich über eine Reihe von Grafiken und Grafik-Bibliotheken, der dazu dienen würde, Ihren Zweck und helfen Ihnen erstellen Sie das Diagramm oder die Visualisierung, die Ihnen gefallen würde. Haben Sie einen Blick auf diese Artikel http://shivganesh.com/2015/05/infovizgeek-encyclopedia-for-visualization-tools/

InformationsquelleAutor der Antwort Shiv Kumar Ganesh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.