Il existe pas mal de frameworks JavaScript pour concevoir des graphes en 2D ou en 3D. Il y a éventuellement l’api de Google que vous pouvez appeler pour générer des graphes pas trop mal et interactifs mais ce n’est pas de cette API que je vais vous parler aujourd’hui.
Une nouvelle API au doux nom d’Easel est en court de développement et j’ai l’honneur de vous la présenter. Elle est actuellement en version alpha (au moment où j’écris cet article, Easel est à la version Alpha 0.3.2) et utilise la puissance de l’HTML5 et des canvas. Les canvas sont maintenant largement utilisés pour la création d’effets ou d’images. De plus, c’est l’un des éléments en HTML5 les mieux supportés par tous les navigateurs modernes du marché. Par ailleurs, dompter la puissance des canvas n’est pas si facile et il vous arrivera probablement (un jour peut-être), de vous arracher les cheveux en essayant de faire quelque chose de correct from scratch.
Heureusement, Easel est la solution pour créer vos graphes. La prise en main de l’API et le développement de petites applications ressemblent un peu à de l’AS3 ou au développement de jeux en JavaScript (si si, ça existe) : créer des sprites, utiliser un plan, manipuler les valeurs de x, y et z… Bien qu’à la prémisse de son développement, Easel possède déjà une bonne documentation qui vous aidera à faire le premier pas : https://www.createjs.com/docs/easeljs/modules/EaselJS.html
Easel n’étant pas purement dédié à la création de graphes, la prise en main n’est pas aussi facile que ça. Easel est dédié à la manipulation des canvas.
Voici quelques petits exemples de codes et de rendus pour vous convaincre un peu plus d’essayer cette petite merveille.
Pour l’affichage d’un simple Hello World, avec choix de la couleur, de la police, de la taille et du message :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Hello World</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="../lib/easel.js"></script>
<script> function init() {
var canvas = document.getElementById("testCanvas");
var stage = new Stage(canvas);
var text = new Text("Hello World!", "36px Arial", "#FFF");
stage.addChild(text);
text.x = 100;
text.y = 100;
stage.update();
} </script>
</head>
<body onload="init();">
<div class="canvasHolder">
<canvas id="testCanvas" width="980" height="580"></canvas>
</div>
</body>
</html>
D’autres exemples :
Vous pouvez télécharger l’ensemble des exemples avec codes de démonstration ici : https://github.com/CreateJS/EaselJS