Graphiques avec JSXGraph
JSXGraph est une librairie qui amène la géométrie dynamique dans votre navigateur, sans installer aucun plugin.
Sa documentation d'origine (en anglais) comporte un tutoriel et
de nombreux exemples qui illustrent ses possibilités.
Quelques exemples sur proglab.fr :
- Une figure géométrique dynamique toute simple : deux points, un cercle et un segment.
- Loi binomiale - loi normale : une courbe et un diagramme en bâtons superposés.
- Loi binomiale : un graphique dynamique où on peut faire varier les paramètres d'une loi binomiale.
Éléments de base : points, droites, courbes etc
Attributs : styles et couleurs
Création du graphique
proglab.initJSXGraph(nom, largeur en pixels, hauteur en pixels);JXG.JSXGraph.initBoard(nom, { attributs });
Les attributs à la création du graphique sont tous optionnels :
boundingbox:[xmin,ymax,xmax,ymin]
axis:true si on veut tracer le repère (false par défaut : pas de repère).
grid:true si on veut un quadrillage (false par défaut).
Exemple :
proglab.initJSXGraph('box', 500, 300);
var board = JXG.JSXGraph.initBoard('box', { boundingbox:[-10,5,10,-5], axis:true, grid:true });
S'il y a plusieurs graphiques en même temps, ils doivent tous avoir un nom différent (par exemple 'box1' et 'box2'), et être référencés par des variables différentes (par exemple 'board1' et 'board2').
La variable board servira dans tout le programme à indiquer dans quel graphique on veut ajouter des éléments.
Éléments de base
Ils se créent tous sur le même schéma :board.create(type d'élément, [parents], {attributs});
board est la variable associée au graphique dans lequel on veut ajouter l'élément.
type d'élément est une chaîne de caractère : 'point', 'line', 'functiongraph', 'chart' etc
parents indique les références pour le tracer : coordonnées, autres objets dont celui-ci dépend, formule (pour les fonctions), données (pour les diagrammes) etc.
attributs donne le style : type et épaisseur de trait, couleurs, flèches, label, taille des caractères...
La plupart des éléments créés sont ensuite déplaçables à la souris, le reste de la figure s'adapte.
Souvent on stocke dans une variable la référence à l'élément créé, pour pouvoir le réutiliser plus tard avec d'autres éléments.
Exemples :
// Un point I et un point J définis par leurs coordonnées initiales. Ils sont déplaçables à la souris.
var p1 = board.create('point', [1, 0], {name:'I'});
var p2 = board.create('point', [0, 1], {name:'J', color:'blue'});
// Point sur un objet (droite, cercle, courbe ou autre).
board.create('point', [variableObjet]);
// Une droite qui passe par I et J. On désigne les points par leur label ou par la variable correspondante.
board.create('line', ['I', p2]);
// Segment [IJ] en pointillés.
board.create('segment', [p1, p2], { dash: 2 });
// Droite d'équation ax+by+c = 0
board.create('line', [c, a, b]);
// Cercle de centre p1, passant par p2
board.create('circle', [p1, p2]);
// Cercle de centre p1 et de rayon 3
board.create('circle', [p1, 3]);
// Cercle passant par 3 points
board.create('circle', [p1, p2, p3]);
// Polygone ABCDE, 5 points précédemment définis.
board.create('polygon', ['A', 'B', 'C', 'D', 'E']);
// Ligne brisée. On donne la liste des x et la liste des y. Ici un trapèze.
board.create('curve', [[0,1,2,3],[0,1,1,0]]);
// La même avec l'intérieur colorié en rouge.
board.create('curve', [[0,1,2,3],[0,1,1,0]], { color:'red' } );
// Graphe de la fonction f(x) = x2-1.
board.create('functiongraph', [function(x){ return x*x-1; }]);
// Diagramme en bâtons
board.create('chart', [liste_y], {chartStyle:'bar'});
board.create('chart', [liste_x, liste_y], {chartStyle:'bar'});
// Nuage de points
board.create('chart', [liste_x, liste_y], {chartStyle:'point'});
// Nuage de points avec droite de régression
board.create('chart', [liste_x, liste_y], {chartStyle:'point,fit'});
Attributs des éléments
Les attributs sont donnés sous forme d'une liste entre accolades. Ils sont séparés par des virgules. Chaque attribut est donné par son nom, deux-points et sa valeur. Comme ils sont nommés, l'ordre des attributs n'a aucune importance.Liste non exaustive :
| attribut | type | valeurs | exemples |
|---|---|---|---|
| color | chaîne | Un nom ou un code de couleur HTML | color: 'blue', color: '#00FF00' |
| opacity | nombre | opacité entre 0 et 1 | opacity: 0.5 |
| strokeWidth | nombre | épaisseur du trait | strokeWidth: 1.5, strokeWidth: 1 |
| dash | entier | style du trait, code entre 0 et 6 | dash: 2 |
| face | chaîne | style de point | 8 formes possibles : '[]', 'o', 'x', '+', '<', '>', 'A', 'v' |
| size | nombre | taille du point | size: 3, size: 5 |
| fixed | booléen | fixe ou mobile | fixed: true, fixed: false |
| visible | booléen | apparent ou pas | visible: true, visible: false |
| trace | booléen | laisse une trace ou pas en se déplaçant | trace: true, trace: false |
| firstArrow, lastArrow | booléen | affiche une flèche au début ou à la fin des segments, arcs, courbes | lastArrow: true |
Ce texte est mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 3.0 non transposé.
Dernière modification le 29 mai 2013