Diagramm in der Express.js-App mit CanvasJS anzeigen-js-Tutorial-php.cn

Diagramm in der Express.js-App mit CanvasJS anzeigen

Susan Sarandon

Freigeben： 2024-12-03 10:26:09

Original

314 Leute haben es durchsucht

Display Chart in Express.js App using CanvasJS

Express.js ist ein leistungsstarkes Tool zum Erstellen serverseitiger Anwendungen und CanvasJS erleichtert die Visualisierung von Daten mit interaktiven Diagrammen. Dieses Tutorial zeigt Ihnen, wie Sie die beiden für ein nahtloses Diagrammerlebnis in Ihrer Express.js-Anwendung integrieren.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Folgendes installiert ist:

Node.js (LTS-Version empfohlen)
npm (wird mit Node.js geliefert)
Grundkenntnisse in JavaScript und Express.js

Schritt 1: Richten Sie Ihre Express.js-Anwendung ein

Erstellen Sie ein neues Verzeichnis für Ihr Projekt und navigieren Sie dorthin:

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

Nach dem Login kopieren

Initialisieren Sie ein neues Node.js-Projekt:

npm init -y

Nach dem Login kopieren

Express installieren:

npm install express

Nach dem Login kopieren

Erstellen Sie eine Datei mit dem Namen server.js und richten Sie einen einfachen Express-Server ein:

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

Nach dem Login kopieren

Schritt 2: Fügen Sie CanvasJS zu Ihrem Projekt hinzu

CanvasJS ist eine clientseitige Bibliothek, daher müssen Sie sie in Ihren Front-End-Code einbinden.

Laden Sie die CanvasJS-Bibliothek von der offiziellen Website von CanvasJS herunter.
Erstellen Sie einen öffentlichen Ordner in Ihrem Projektverzeichnis.
Platzieren Sie das heruntergeladene CanvasJS-Skript (z. B. canvasjs.min.js) im öffentlichen Ordner.

Schritt 3: Erstellen Sie eine HTML-Datei zur Anzeige des Diagramms

Erstellen Sie im öffentlichen Ordner eine Datei mit dem Namen index.html.
Fügen Sie den folgenden Inhalt zu index.html hinzu:

<!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

Nach dem Login kopieren

Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000.
Sie sollten ein Säulendiagramm mit den Verkaufsdaten sehen.

Schritt 5: Passen Sie Ihr Diagramm an

Um Ihr Diagramm anzupassen, können Sie das dataPoints-Array mit dynamischen Daten aus einer API oder Datenbank wie MySQL oder MongoDB ändern. Sie könnten beispielsweise die statischen Verkaufsdaten durch Echtzeitverkäufe ersetzen, die von einem Backend-Dienst abgerufen werden. Sie können auch mit verschiedenen Diagrammtypen wie Linien-, Balken- oder Kreisdiagrammen experimentieren, um Ihren Visualisierungsanforderungen gerecht zu werden. Detaillierte Anpassungsoptionen finden Sie in der CanvasJS-Dokumentation.

Abschluss

Durch die Integration von CanvasJS mit Express.js eröffnen Sie sich die Möglichkeit, Daten auf visuell ansprechende und interaktive Weise darzustellen. Unabhängig davon, ob Sie Dashboards erstellen oder Benutzeroberflächen verbessern, bietet diese Kombination eine nahtlose Möglichkeit, Dateneinblicke ansprechender und zugänglicher zu machen. Darüber hinaus können Sie Diagramme mithilfe von Daten aus Datenbanken wie MySQL oder MongoDB anzeigen, die wir in zukünftigen Artikeln untersuchen werden.

Das obige ist der detaillierte Inhalt vonDiagramm in der Express.js-App mit CanvasJS anzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!