Afficher le graphique dans l'application Express.js à l'aide de CanvasJS-js tutoriel-php.cn

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

Susan Sarandon

Libérer： 2024-12-03 10:26:09

original

403 Les gens l'ont consulté

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

Copier après la connexion

Initialiser un nouveau projet Node.js :

npm init -y

Copier après la connexion

Installer Express :

npm install express

Copier après la connexion

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}`);
});

Copier après la connexion

É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

Copier après la connexion

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!