Ce tutoriel vous guide dans la création de graphiques interactifs au sein de vos applications Node.js en utilisant la bibliothèque de création de graphiques polyvalente, billboard.js. Node.js lui-même ne rend pas directement les graphiques dans un navigateur ; au lieu de cela, nous exploitons billboard.js, une bibliothèque côté client, pour fournir le HTML, le CSS et le JavaScript nécessaires au rendu des graphiques dans un environnement Node.js.
Table des matières
- Présentation de billboard.js
- Prérequis pour billboard.js
- Création d’un graphique linéaire simple
- Personnalisation avancée des graphiques (facultatif)
Présentation de billboard.js
billboard.js est une bibliothèque de création de graphiques JavaScript robuste basée sur D3.js. Son API claire simplifie la création de différents types de graphiques, notamment les graphiques linéaires, les graphiques à barres, les graphiques en aires, les nuages de points, et plus encore. Sa nature légère, ses nombreuses options de personnalisation et sa documentation complète en font l’outil idéal pour intégrer des graphiques dans les applications Node.js. Parce qu’elle s’exécute entièrement côté client, billboard.js assure des performances et une réactivité améliorées, laissant votre serveur Node.js libre de gérer d’autres tâches.
Prérequis pour billboard.js
Avant de commencer, assurez-vous d’avoir :
- Node.js et npm (ou yarn) : Téléchargez et installez Node.js et npm (Node Package Manager) ou yarn depuis le site Web officiel de Node.js.
- Compréhension fondamentale du HTML, du CSS et du JavaScript : Bien que billboard.js simplifie la création de graphiques, des connaissances de base en développement Web seront utiles.
- Un éditeur de code ou un IDE : Choisissez un éditeur de code préféré (VS Code, Sublime Text, Atom, etc.) pour écrire votre code.
Remarque : nous n’installerons pas billboard.js via npm directement dans notre projet Node.js car il s’agit d’une bibliothèque côté client. Au lieu de cela, nous l’inclurons via une balise « dans notre HTML.
Création d’un graphique linéaire simple
Cet exemple montre un graphique linéaire de base. Nous allons configurer un serveur Node.js pour servir un fichier HTML contenant billboard.js et le code du graphique.
1. Configuration du projet : Créez un répertoire (par exemple, `node-chart-example`) et créez les fichiers suivants à l’intérieur :
2. `index.js` (serveur Node.js) :
const http = require('http');
const fs = require('fs');
const path = require('path'); // Ajouté pour une gestion améliorée des chemins
const server = http.createServer((req, res) => {
const filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
fs.readFile(filePath, (err, data) => {
if (err) {
res.writeHead(404);
res.end('Fichier non trouvé');
} else {
const extname = path.extname(filePath);
const contentType = extname === '.html' ? 'text/html' : 'application/javascript';
res.writeHead(200, { 'Content-Type': contentType });
res.end(data);
}
});
});
const port = 3000;
server.listen(port, () => {
console.log(`Serveur en écoute sur le port ${port}`);
});
3. `index.html` (fichier HTML avec graphique) :
<html>
<head>
<title>Graphique Billboard.js</title>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = bb.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'line'
}
});
</script>
</body>
</html>
4. Exécutez le serveur : Accédez à votre répertoire de projet et exécutez node index.js. Accédez au graphique à http://localhost:3000.
Personnalisation avancée des graphiques (facultatif)
billboard.js offre une personnalisation étendue. Explorez sa documentation pour des fonctionnalités telles que les étiquettes d’axes, les couleurs, les info-bulles, la manipulation des données, et plus encore. Expérimentez avec différents types de graphiques et options pour créer des visualisations attrayantes.