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.
Bevor Sie beginnen, stellen Sie sicher, dass Folgendes installiert ist:
mkdir express-canvasjs-chart cd express-canvasjs-chart
npm init -y
npm install express
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}`);
});
CanvasJS ist eine clientseitige Bibliothek, daher müssen Sie sie in Ihren Front-End-Code einbinden.
<!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
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.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
