Express.js はサーバーサイド アプリケーションを作成するための強力なツールであり、CanvasJS を使用すると、インタラクティブなグラフでデータを簡単に視覚化できます。このチュートリアルでは、Express.js アプリケーションでシームレスなグラフ作成エクスペリエンスを実現するために 2 つを統合する方法を説明します。
始める前に、以下がインストールされていることを確認してください:
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 はクライアント側ライブラリであるため、フロントエンド コードに含める必要があります。
<!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
グラフをカスタマイズするには、API またはデータベース (MySQL や MongoDB など) からの動的データを使用して dataPoints 配列を変更できます。たとえば、静的な売上データをバックエンド サービスから取得したリアルタイムの売上データに置き換えることができます。視覚化のニーズに合わせて、折れ線、棒、円などのさまざまな種類のグラフを試すこともできます。カスタマイズ オプションの詳細については、CanvasJS ドキュメントを参照してください。
CanvasJS を Express.js と統合することで、視覚的に魅力的でインタラクティブな方法でデータを表示する機能が解放されます。ダッシュボードを構築している場合でも、ユーザー インターフェイスを強化している場合でも、この組み合わせにより、データの洞察をより魅力的でアクセスしやすくするシームレスな方法が提供されます。さらに、MySQL や MongoDB などのデータベースから取得したデータを使用してグラフを表示することもできます。これについては今後の記事で説明します。
以上がCanvasJS を使用して Express.js アプリでチャートを表示するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。