Paparkan Carta dalam Apl Express.js menggunakan CanvasJS-tutorial js-php.cn

Paparkan Carta dalam Apl Express.js menggunakan CanvasJS

Susan Sarandon

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

asal

314 orang telah melayarinya

Display Chart in Express.js App using CanvasJS

Express.js ialah alat yang berkuasa untuk mencipta aplikasi sisi pelayan dan CanvasJS memudahkan untuk menggambarkan data dengan carta interaktif. Tutorial ini akan menunjukkan kepada anda cara menyepadukan kedua-duanya untuk pengalaman carta yang lancar dalam aplikasi Express.js anda.

Prasyarat

Sebelum anda bermula, pastikan anda telah memasang yang berikut:

Node.js (versi LTS disyorkan)
npm (datang dengan Node.js)
Pengetahuan asas JavaScript dan Express.js

Langkah 1: Sediakan Aplikasi Express.js Anda

Buat direktori baharu untuk projek anda dan navigasi ke sana:

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

Salin selepas log masuk

Mulakan projek Node.js baharu:

npm init -y

Salin selepas log masuk

Pasang Express:

npm install express

Salin selepas log masuk

Buat fail bernama server.js dan sediakan pelayan Express asas:

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

Salin selepas log masuk

Langkah 2: Tambahkan CanvasJS pada Projek Anda

CanvasJS ialah pustaka sebelah pelanggan, jadi anda perlu memasukkannya dalam kod bahagian hadapan anda.

Muat turun perpustakaan CanvasJS daripada tapak web rasmi CanvasJS.
Buat folder awam dalam direktori projek anda.
Letakkan skrip CanvasJS yang dimuat turun (cth., canvasjs.min.js) di dalam folder awam.

Langkah 3: Cipta Fail HTML untuk Memaparkan Carta

Di dalam folder awam, buat fail bernama index.html.
Tambahkan kandungan berikut pada 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

Salin selepas log masuk

Buka penyemak imbas anda dan navigasi ke http://localhost:3000.
Anda sepatutnya melihat carta lajur yang memaparkan data jualan.

Langkah 5: Sesuaikan Carta Anda

Untuk menyesuaikan carta anda, anda boleh mengubah suai tatasusunan dataPoints dengan data dinamik daripada API atau pangkalan data, seperti MySQL atau MongoDB. Sebagai contoh, anda boleh menggantikan data jualan statik dengan jualan masa nyata yang diambil daripada perkhidmatan bahagian belakang. Anda juga boleh bereksperimen dengan jenis carta yang berbeza seperti garisan, bar atau pai untuk memenuhi keperluan visualisasi anda. Untuk pilihan penyesuaian terperinci, rujuk dokumentasi CanvasJS.

Kesimpulan

Dengan menyepadukan CanvasJS dengan Express.js, anda membuka kunci keupayaan untuk mempersembahkan data dengan cara yang menarik dan interaktif secara visual. Sama ada anda sedang membina papan pemuka atau meningkatkan antara muka pengguna, gabungan ini menyediakan cara yang lancar untuk menjadikan cerapan data lebih menarik dan boleh diakses. Selain itu, anda boleh memaparkan carta menggunakan data yang diperoleh daripada pangkalan data seperti MySQL atau MongoDB, yang akan kami terokai dalam artikel akan datang.

Atas ialah kandungan terperinci Paparkan Carta dalam Apl Express.js menggunakan CanvasJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!