Maison >interface Web >js tutoriel >Afficher le graphique dans l'application Express.js à l'aide de CanvasJS

Afficher le graphique dans l'application Express.js à l'aide de CanvasJS

Susan Sarandonoriginal: 2024-12-03 10:26:09323parcourir

Display Chart in Express.js App using CanvasJS

Express.js est un outil puissant pour créer des applications côté serveur, et CanvasJS facilite la visualisation des données avec des graphiques interactifs. Ce didacticiel vous montrera comment intégrer les deux pour une expérience graphique transparente dans votre application Express.js.

Conditions préalables

Avant de commencer, assurez-vous que les éléments suivants sont installés :

Node.js (version LTS recommandée)
npm (livré avec Node.js)
Connaissance de base de JavaScript et Express.js

Étape 1 : configurez votre application Express.js

Créez un nouveau répertoire pour votre projet et accédez-y :

mkdir express-canvasjs-chart
cd express-canvasjs-chart

Initialiser un nouveau projet Node.js :

npm init -y

Installer Express :

npm install express

Créez un fichier nommé server.js et configurez un serveur Express de base :

const express = require('express');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

Étape 2 : ajoutez CanvasJS à votre projet

CanvasJS est une bibliothèque côté client, vous devez donc l'inclure dans votre code front-end.

Téléchargez la bibliothèque CanvasJS depuis le site officiel de CanvasJS.
Créez un dossier public dans le répertoire de votre projet.
Placez le script CanvasJS téléchargé (par exemple, canvasjs.min.js) dans le dossier public.

Étape 3 : Créez un fichier HTML pour afficher le graphique

Dans le dossier public, créez un fichier nommé index.html.
Ajoutez le contenu suivant à index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Chart in Express App using CanvasJS</title>
    <script src="canvasjs.min.js"></script>
</head>
<body>
    <div>



<h3>
  
  
  Step 4: Run Your Application
</h3>

<ol>
<li>Start the server:
</li>
</ol>

<pre class="brush:php;toolbar:false">node server.js

Ouvrez votre navigateur et accédez à http://localhost:3000.
Vous devriez voir un histogramme affichant les données de ventes.

Étape 5 : Personnalisez votre graphique

Pour personnaliser votre graphique, vous pouvez modifier le tableau dataPoints avec des données dynamiques provenant d'une API ou d'une base de données, telle que MySQL ou MongoDB. Par exemple, vous pouvez remplacer les données de ventes statiques par des ventes en temps réel récupérées à partir d'un service backend. Vous pouvez également expérimenter différents types de graphiques comme des courbes, des barres ou des secteurs pour répondre à vos besoins de visualisation. Pour les options de personnalisation détaillées, reportez-vous à la documentation CanvasJS.

Conclusion

En intégrant CanvasJS à Express.js, vous débloquez la possibilité de présenter les données de manière visuellement attrayante et interactive. Que vous créiez des tableaux de bord ou amélioriez les interfaces utilisateur, cette combinaison offre un moyen transparent de rendre les informations sur les données plus attrayantes et accessibles. De plus, vous pouvez afficher des graphiques à l'aide de données provenant de bases de données telles que MySQL ou MongoDB, que nous explorerons dans les prochains articles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript mysql html npm express Static Array for include Directory using public JS this display column database mongodb http

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Stockage de session et stockage local : quelle est la différence en termes de performances et d'accès aux données ?Article suivant：Stockage de session et stockage local : quelle est la différence en termes de performances et d'accès aux données ?

Articles Liés

Voir plus