Projet Web de visualisation de données à l'aide de Node.js-js tutoriel-php.cn

Projet Web de visualisation de données à l'aide de Node.js

WBOY

Libérer： 2023-11-08 15:32:06

original

1237 Les gens l'ont consulté

Projet Web de visualisation de données à laide de Node.js

L'utilisation de Node.js pour mettre en œuvre des projets Web de visualisation de données nécessite des exemples de code spécifiques

Avec l'avènement de l'ère du Big Data, la visualisation de données est devenue un moyen très important d'afficher des données. En convertissant les données en tableaux, graphiques, cartes et autres formes, il peut afficher visuellement les tendances, les corrélations et la distribution des données, aidant ainsi les utilisateurs à mieux comprendre et analyser les données. En tant qu'environnement JavaScript côté serveur efficace et flexible, Node.js peut bien mettre en œuvre des projets Web de visualisation de données. Dans cet article, nous utiliserons un exemple pour présenter en détail comment utiliser Node.js pour implémenter un projet Web simple de visualisation de données.

Tout d’abord, nous devons préparer quelques outils et bibliothèques de base. La première étape consiste à installer Node.js. Vous pouvez le télécharger depuis le site officiel (https://nodejs.org/) et l'installer selon les instructions. Ensuite, nous devons installer certaines bibliothèques courantes à l’aide du gestionnaire de packages npm de Node.js. Ouvrez un terminal ou un outil de ligne de commande et entrez la commande suivante pour installer :

npm install express

Copier après la connexion

Ici, nous utilisons la bibliothèque Express, qui est un framework d'application Web Node.js simple et flexible qui peut nous aider à créer rapidement des applications Web. Ensuite, nous devons installer certaines bibliothèques pour la visualisation des données, telles que D3.js et Chart.js. De même, exécutez la commande suivante dans la ligne de commande :

npm install d3
npm install chart.js

Copier après la connexion

D3.js est une puissante bibliothèque JavaScript permettant de manipuler les données dans les documents et de générer différentes représentations telles que HTML, SVG et CSS basées sur les données. Chart.js est une autre bibliothèque JavaScript facile à utiliser pour dessiner divers tableaux et graphiques.

Ensuite, nous créons un nouveau dossier et y créons un fichier nommé app.js comme fichier d'entrée pour notre application Node.js. Dans app.js, nous devons d'abord introduire les bibliothèques et modules requis.

const express = require('express');
const app = express();
const path = require('path');
const d3 = require('d3');
const Chart = require('chart.js');

Copier après la connexion

Ensuite, nous devons configurer une configuration de base, telle que le numéro de port et le chemin du dossier statique.

const port = 3000;
app.use(express.static(path.join(__dirname, 'public')));

Copier après la connexion

Ici, nous utilisons le middleware de fichiers statiques d'Express et définissons le dossier public comme notre dossier statique, qui peut stocker nos fichiers HTML, CSS et JavaScript.

Ensuite, nous définissons un itinéraire pour gérer les demandes et le traitement des données. Dans cet exemple, nous supposons que nous avons un fichier de données data.json stocké dans un fichier JSON. Dans la fonction de traitement de routage, nous lisons d'abord le fichier de données et le convertissons en objet JavaScript.

app.get('/data', (req, res) => {
  const data = require('./data.json');
  // 在这里进行数据处理和可视化操作
  res.send(data);
});

Copier après la connexion

Ensuite, nous pouvons utiliser D3.js et Chart.js pour traiter et visualiser les données. En prenant l'histogramme comme exemple, nous devons d'abord créer un fichier HTML (tel que index.html) et y introduire la bibliothèque Chart.js et les fichiers JavaScript personnalisés.

<!DOCTYPE html>
<html>
<head>
    <title>Data Visualization</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="chart.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
</body>
</html>

Copier après la connexion

Ensuite, dans le fichier chart.js, nous pouvons utiliser D3.js pour traiter les données et Chart.js pour générer le graphique.

fetch('/data')
  .then(response => response.json())
  .then(data => {
    const labels = data.map(item => item.label);
    const values = data.map(item => item.value);

    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          label: 'Data',
          data: values,
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }]
      },
    });
});

Copier après la connexion

Dans le code JavaScript ci-dessus, nous récupérons d'abord les données du serveur via la fonction fetch. Ensuite, nous utilisons la bibliothèque D3.js pour traiter les données et extraire respectivement les étiquettes et les valeurs. Enfin, nous créons un histogramme à l'aide de la bibliothèque Chart.js et transmettons les données et autres informations de style à l'objet graphique. Enfin, nous dessinons le graphique dans l'élément canvas de la page HTML.

Enfin, nous devons écouter le numéro de port dans l'application Node.js et démarrer le serveur.

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

Copier après la connexion

Nous pouvons maintenant démarrer notre application Node.js en exécutant app.js dans le terminal ou en ligne de commande. Ensuite, visitez http://localhost:3000 dans le navigateur et vous pourrez voir notre application Web de visualisation de données.

A travers les exemples ci-dessus, nous pouvons voir qu'utiliser Node.js pour mettre en œuvre des projets Web de visualisation de données n'est pas compliqué. En utilisant Node.js comme environnement côté serveur, combiné à des bibliothèques telles que D3.js et Chart.js, nous pouvons rapidement créer une application Web de visualisation de données entièrement fonctionnelle. Bien entendu, les projets réels comporteront davantage de détails et de complexités, qui devront être étendus et optimisés en fonction des besoins spécifiques.

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!