cari

Rumah >hujung hadapan web >tutorial js >Paparkan Carta dalam Apl Express.js menggunakan CanvasJS

Paparkan Carta dalam Apl Express.js menggunakan CanvasJS

Susan Sarandon
Susan Sarandonasal
2024-12-03 10:26:09371semak imbas

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

  1. Buat direktori baharu untuk projek anda dan navigasi ke sana: 
mkdir express-canvasjs-chart
cd express-canvasjs-chart
  1. Mulakan projek Node.js baharu: 
npm init -y
  1. Pasang Express: 
npm install express
  1. 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}`);
});

Langkah 2: Tambahkan CanvasJS pada Projek Anda

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

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

Langkah 3: Cipta Fail HTML untuk Memaparkan Carta

  1. Di dalam folder awam, buat fail bernama index.html.
  2. 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
  1. Buka penyemak imbas anda dan navigasi ke http://localhost:3000.
  2. 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!

JavaScript mysql html npm express Static Array for include Directory using public JS this display column database mongodb http
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Storan Sesi lwn. Storan Setempat: Apakah Perbezaan Prestasi dan Akses Data?Artikel seterusnya：Storan Sesi lwn. Storan Setempat: Apakah Perbezaan Prestasi dan Akses Data?

Artikel berkaitan

Lihat lagi