ホームページ >ウェブフロントエンド >jsチュートリアル >CanvasJS を使用して Express.js アプリでチャートを表示する
CanvasJS を使用して Express.js アプリでチャートを表示する
- Susan Sarandonオリジナル
- 2024-12-03 10:26:09323ブラウズ
Express.js はサーバーサイド アプリケーションを作成するための強力なツールであり、CanvasJS を使用すると、インタラクティブなグラフでデータを簡単に視覚化できます。このチュートリアルでは、Express.js アプリケーションでシームレスなグラフ作成エクスペリエンスを実現するために 2 つを統合する方法を説明します。
前提条件
始める前に、以下がインストールされていることを確認してください:
- Node.js (LTS版推奨)
- npm (Node.js に付属)
- JavaScript と Express.js の基本的な知識
ステップ 1: Express.js アプリケーションをセットアップする
- プロジェクト用に新しいディレクトリを作成し、そこに移動します。
mkdir express-canvasjs-chart cd express-canvasjs-chart
- 新しい Node.js プロジェクトを初期化します。
npm init -y
- Express をインストールします:
npm install express
- 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 はクライアント側ライブラリであるため、フロントエンド コードに含める必要があります。
- CanvasJS の公式 Web サイトから CanvasJS ライブラリをダウンロードします。
- プロジェクト ディレクトリにパブリック フォルダーを作成します。
- ダウンロードした CanvasJS スクリプト (canvasjs.min.js など) をパブリック フォルダー内に配置します。
ステップ 3: チャートを表示するための HTML ファイルを作成する
- パブリック フォルダー内に、index.html という名前のファイルを作成します。
- 次のコンテンツを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
- ブラウザを開いて http://localhost:3000 に移動します。
- 売上データを示す縦棒グラフが表示されます。
ステップ 5: グラフをカスタマイズする
グラフをカスタマイズするには、API またはデータベース (MySQL や MongoDB など) からの動的データを使用して dataPoints 配列を変更できます。たとえば、静的な売上データをバックエンド サービスから取得したリアルタイムの売上データに置き換えることができます。視覚化のニーズに合わせて、折れ線、棒、円などのさまざまな種類のグラフを試すこともできます。カスタマイズ オプションの詳細については、CanvasJS ドキュメントを参照してください。
結論
CanvasJS を Express.js と統合することで、視覚的に魅力的でインタラクティブな方法でデータを表示する機能が解放されます。ダッシュボードを構築している場合でも、ユーザー インターフェイスを強化している場合でも、この組み合わせにより、データの洞察をより魅力的でアクセスしやすくするシームレスな方法が提供されます。さらに、MySQL や MongoDB などのデータベースから取得したデータを使用してグラフを表示することもできます。これについては今後の記事で説明します。
以上がCanvasJS を使用して Express.js アプリでチャートを表示するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。