Le Javascript est un langage de programmation très populaire qui permet aux développeurs de créer des applications web interactives. Une des fonctionnalités les plus intéressantes de Javascript est la possibilité d’intégrer des librairies graphiques externes pour afficher des widgets graphiques. Dans cet article, nous allons vous montrer comment afficher un simple widget graphique fourni par une librairie graphique externe en utilisant Javascript.
Javascript : Afficher un simple widget graphique fournit par une librairie graphique externe.
- Dans ce code Javascript intégré dans une page HTML, je montre comment utiliser un widget graphique fournit par une librairie Javascript installé sur une serveur http, soit distant, soit local.
- La librairie RGraph utilisée ici est installée sur le serveur du site à des fins de test. Il est également possible d’installer la librairie en local sur un miniPC par exemple. Voir la procédure ici : Installer des librairies Javascript locales
<html>
<head>
<meta http-equiv=« content-type » content=« text/html; charset=UTF-8 » /> <!– Encodage de la page –>
<script language=« javascript » type=« text/javascript »>
<!–
function path(jsFileNameIn) { // fonction pour fixer chemin absolu
var js = document.createElement(« script »);
js.type = « text/javascript »;
js.src = » https://www.mon-club-elec.fr/mes_javascripts/rgraph/ »+jsFileNameIn; // <=== serveur externe – modifier chemin ++ si besoin
//js.src = « http://127.0.0.1/javascript/rgraph/ »+jsFileNameIn; // serveur local
//js.src = « http://web.archive.org/web/20210804223007/https://www.mon-club-elec.fr/pmwiki_mon_club_elec/javascript/rgraph/ »+jsFileNameIn; // chemin local – fichier doit etre a la racine serveur
document.head.appendChild(js);
//alert(js.src); // debug
}
//—- fichiers a charger —
path(‘RGraph.common.core.js’);
path(‘RGraph.gauge.js’);
window.onload = function () { // fonction executee apres chargement de la page HTML
//— code graphique —
// parametres sont : nom du canva, min, max, valeur courante
var gauge = new RGraph.Gauge(‘nomCanvas’, 0, 1023, 300); // declare widget graphique
gauge.Draw(); // dessine le widget graphique dans le canvas
} // fin fonction onload
</script>
<title>Test RGraph simple</title>
</head>
UneL’appui sur un BP allume une LED.<body>
<canvas id=« nomCanvas » width=« 250 » height=« 250 »>[Canvas non disponible]</canvas>
<br />
Test simple d’un afficheur analogique avec aiguille
</body>
</html>
