Graphique linéaire animé en Javascript?

J'aimerais faire une ligne graphique sur une page web à l'aide de Javascript. Je veux qu'il soit animé de sorte que lorsque le chargement de la page, la ligne est lentement "tiré" sur le graphique.

J'ai réussi à obtenir un statique graphique de travail, à l'aide de flotmais je suis pas sûr de la façon de l'animer.

Ce serait la moitié de mon travail fait juste le faire dessiner une ligne à mi-chemin le long du graphique, mais quand j'essaie de le faire en modifiant l'ensemble de données, il modifie la structure du graphe, de sorte que la ligne se remplit à 100% de la zone graphique.

Donc, il y a un moyen de tracer la ligne de données dans les stades, afin que je puisse l'animer?

Ou sinon, est-il un autre javascript graphique cadre que j'ai négligé?

source d'informationauteur Jonathan

  1. 15

    Voici un exemple simple utilisant 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>
  2. 5

    Penser en dehors de la zone (depuis la zone de flot est inconnu pour moi), vous avez juste à couvrir le graphique avec un div qui ralentissent recule et affiche la ligne. La réduction d'une div en javascript est une tâche facile, même sans des bibliothèques tierces.

    Edit:

    J'ai dû voir combien il était facile, donc j'ai lancé ce pied en environ 10 minutes. 

    <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>
  3. 2

    J'ai écrit une bibliothèque qui se concentre fortement sur les animations de graphiques. Avis de l'animation lors de la redimensionne. Espérons que cela vous aide, vous et tous les autres!

    LYNE.JS

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

    GIF ÉCHANTILLON

    Graphique linéaire animé en Javascript?

    VIVRE ÉCHANTILLONS

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

    Vous pourriez modifier flot. J'ai effectué des changements dans le flot de code avant. C'est assez bien écrit. Il y a un groupe google si vous êtes coincé.

    Ou vous pouvez simplement apprendre à utiliser de la Toile, ce qui est le flot utilise.

  5. 0

    Je voulais ajouter une ligne horizontale animations pour mon flot des graphiques aussi, malheureusement, il n'existe pas de plugin pour faire cela.

    n'hésitez pas à utiliser le plugin que j'ai créé pour cela : http://www.codicode.com/art/jquery_flot_animator.aspx

  6. 0

    Vous pouvez utiliser d3js. L'apprentissage d3 va prendre du temps, mais c'est la puissance ie énorme et sans précédent.

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

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

    Quelques exemples de d3 visualisations:

    Officiel d3 Site web

    Quelque chose que j'ai construit pour une ONG

  7. 0

    J'ai mis à travers une série de tableaux et Graphique Bibliothèques qui serviront votre but en tant que bien que vous aider à créer le graphique de visualisation ou qui vous plaît. Jetez un oeil à cet article http://shivganesh.com/2015/05/infovizgeek-encyclopedia-for-visualization-tools/