使用 CanvasJS 在 Express.js 應用程式中顯示圖表

Express.js 是用於建立伺服器端應用程式的強大工具，而 CanvasJS 可以輕鬆地透過互動式圖表視覺化資料。本教學將向您展示如何將兩者集成，以便在 Express.js 應用程式中獲得無縫的圖表體驗。

先決條件

開始之前，請確保您已安裝以下軟體：

• Node.js（推薦LTS版本）
• npm（Node.js 附）
• JavaScript 和 Express.js 基礎

第 1 步：設定您的 Express.js 應用程式

1. 為您的專案建立一個新目錄並導航到它：

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

1. 初始化一個新的 Node.js 專案：

npm init -y

1. 安裝 Express：

npm install express

1. 建立一個名為 server.js 的檔案並設定一個基本的 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}`);
});

步驟 2：將 CanvasJS 新增至您的專案中

CanvasJS 是一個客戶端程式庫，因此您需要將其包含在前端程式碼中。

1. 從CanvasJS官網下載CanvasJS庫。
2. 在專案目錄中建立一個公用資料夾。
3. 將下載的 CanvasJS 腳本（例如 canvasjs.min.js）放入 public 資料夾中。

第 3 步：建立 HTML 檔案來顯示圖表

1. 在公用資料夾中，建立一個名為index.html的檔案。
2. 在index.html中加入以下內容：

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


    <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. 開啟瀏覽器並導航至 http://localhost:3000。
2. 您應該會看到一個顯示銷售數據的長條圖。

第 5 步：自訂您的圖表

要自訂圖表，您可以使用來自 API 或資料庫（例如 MySQL 或 MongoDB）的動態資料修改 dataPoints 陣列。例如，您可以用從後端服務取得的即時銷售資料取代靜態銷售資料。您也可以嘗試不同的圖表類型，例如折線圖、長條圖或圓餅圖，以滿足您的視覺化需求。有關詳細的自訂選項，請參閱 CanvasJS 文件。

結論

透過將 CanvasJS 與 Express.js 集成，您可以解鎖以視覺上引人注目的互動式方式呈現資料的能力。無論您是建立儀表板還是增強使用者介面，這種組合都提供了一種無縫的方式，使資料洞察更具吸引力和可存取性。此外，您可以使用來自 MySQL 或 MongoDB 等資料庫的資料來顯示圖表，我們將在以後的文章中對此進行探討。