Graphiques JSXGraph - Courbes et géométrie dynamique

JSXGraph est une bibliothèque JavaScript pour créer des graphiques mathématiques interactifs : courbes de fonctions, constructions géométriques, points déplaçables. Idéal pour l'enseignement des mathématiques.

Alternative à GeoGebra JSXGraph est gratuit, open-source, et s'intègre parfaitement dans vos pages HTML. Les élèves peuvent manipuler les graphiques directement dans leur navigateur.

Éditeur WYSIWYG intégré L'éditeur Sarmate.net dispose d'un outil WYSIWYG qui simplifie la création de figures JSXGraph. Vous pouvez créer vos graphiques visuellement sans écrire de code, puis copier le code généré dans vos pages HTML.

Mise en place

Incluez JSXGraph dans votre page HTML :

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My JSXGraph Chart</title>

    <!-- JSXGraph CSS -->
    <link rel="stylesheet" href="https://jsxgraph.org/distrib/jsxgraph.css">

    <!-- JSXGraph JavaScript -->
    <script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
</head>
<body>

    <!-- jsxgraph-container -->
    <div id="box" style="width: 500px; height: 500px;"></div>

    <script>
        // jsxgraph-your-code    </script>

</body>
</html>

Premier graphique

Créons un repère avec une fonction simple :

JavaScript

// jsxgraph-create-boardconst board = JXG.JSXGraph.initBoard('box', {
    boundingbox: [-5, 5, 5, -5],  // [xmin, ymax, xmax, ymin]
    axis: true,                    // jsxgraph-axis    grid: true                     // jsxgraph-grid});

// jsxgraph-plot-func f(x) = x²
board.create('functiongraph', [
    function(x) { return x * x; }
], {
    strokeColor: 'blue',
    strokeWidth: 2
});

Tracer des courbes

Fonction simple

JavaScript

// jsxgraph-parabolaboard.create('functiongraph', [x => x*x - 2*x + 1]);

// jsxgraph-sinusboard.create('functiongraph', [Math.sin], {strokeColor: 'red'});

// jsxgraph-piecewiseboard.create('functiongraph', [
    function(x) {
        if (x < 0) return -x;
        else return x * x;
    }
]);

Courbe paramétrique

JavaScript

// jsxgraph-param-circleboard.create('curve', [
    t => 2 * Math.cos(t),   // x(t)
    t => 2 * Math.sin(t),   // y(t)
    0,                       // t_min
    2 * Math.PI              // t_max
], {strokeColor: 'green'});

Points et interactivité

Point fixe

JavaScript

// jsxgraph-point-at (2, 3)
const A = board.create('point', [2, 3], {
    name: 'A',
    size: 4,
    color: 'red'
});

Point déplaçable (glisseur)

JavaScript

// jsxgraph-slider (jsxgraph-slider-desc)
const a = board.create('slider', [[-3, 4], [3, 4], [-3, 1, 3]], {
    name: 'a'
});

// jsxgraph-dependentboard.create('functiongraph', [
    function(x) { return a.Value() * x * x; }
]);

Géométrie dynamique

JavaScript

const board = JXG.JSXGraph.initBoard('box', {
    boundingbox: [-5, 5, 5, -5],
    axis: true
});

// jsxgraph-draggable-pointsconst A = board.create('point', [-2, -1], {name: 'A'});
const B = board.create('point', [2, -1], {name: 'B'});
const C = board.create('point', [0, 2], {name: 'C'});

// jsxgraph-triangleconst triangle = board.create('polygon', [A, B, C], {
    fillColor: 'yellow',
    fillOpacity: 0.3
});

// jsxgraph-circumcircle (jsxgraph-circumcircle-desc)
const circle = board.create('circumcircle', [A, B, C], {
    strokeColor: 'blue'
});

// jsxgraph-centerboard.create('circumcenter', [A, B, C], {
    name: 'O',
    color: 'blue'
});

Interactivité automatique JSXGraph recalcule automatiquement tous les objets dépendants quand vous déplacez un point. C'est le principe de la géométrie dynamique.

Exemple complet : étude de fonction

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsxgraph-study-func</title>
    <link rel="stylesheet" href="https://jsxgraph.org/distrib/jsxgraph.css">
    <script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        #box { margin: 20px auto; border: 1px solid #ddd; }
    </style>
</head>
<body>

    <h1>f(x) = ax² + bx + c</h1>
    <p>jsxgraph-move-sliders</p>

    <div id="box" style="width: 600px; height: 400px;"></div>

    <script>
        const board = JXG.JSXGraph.initBoard('box', {
            boundingbox: [-6, 10, 6, -4],
            axis: true,
            grid: true
        });

        // jsxgraph-params-sliders        const a = board.create('slider', [[-5, 8], [-1, 8], [-2, 1, 2]], {name: 'a'});
        const b = board.create('slider', [[-5, 7], [-1, 7], [-3, 0, 3]], {name: 'b'});
        const c = board.create('slider', [[-5, 6], [-1, 6], [-3, 0, 3]], {name: 'c'});

        // jsxgraph-curve-func        const f = board.create('functiongraph', [
            function(x) {
                return a.Value() * x * x + b.Value() * x + c.Value();
            }
        ], {strokeColor: 'blue', strokeWidth: 2});

        // jsxgraph-vertex        const vertex = board.create('point', [
            function() { return -b.Value() / (2 * a.Value()); },
            function() {
                const xV = -b.Value() / (2 * a.Value());
                return a.Value() * xV * xV + b.Value() * xV + c.Value();
            }
        ], {name: 'S', color: 'red', size: 5});

        // jsxgraph-display-eq        board.create('text', [1, 8, function() {
            return 'f(x) = ' + a.Value().toFixed(1) + 'x² + '
                + b.Value().toFixed(1) + 'x + ' + c.Value().toFixed(1);
        }]);
    </script>

</body>
</html>

Prêt à créer vos graphiques ?

Illustrez vos cours de mathématiques avec des figures interactives

Créer un compte gratuit