ホームページ > ウェブフロントエンド > jsチュートリアル > CanvasJS を使用して Express.js アプリでチャートを表示する

CanvasJS を使用して Express.js アプリでチャートを表示する

Susan Sarandon
リリース: 2024-12-03 10:26:09
オリジナル
402 人が閲覧しました

Display Chart in Express.js App using CanvasJS

Express.js はサーバーサイド アプリケーションを作成するための強力なツールであり、CanvasJS を使用すると、インタラクティブなグラフでデータを簡単に視覚化できます。このチュートリアルでは、Express.js アプリケーションでシームレスなグラフ作成エクスペリエンスを実現するために 2 つを統合する方法を説明します。

前提条件

始める前に、以下がインストールされていることを確認してください:

  • 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 の公式 Web サイトから CanvasJS ライブラリをダウンロードします。
  2. プロジェクト ディレクトリにパブリック フォルダーを作成します。
  3. ダウンロードした CanvasJS スクリプト (canvasjs.min.js など) をパブリック フォルダー内に配置します。

ステップ 3: チャートを表示するための HTML ファイルを作成する

  1. パブリック フォルダー内に、index.html という名前のファイルを作成します。
  2. 次のコンテンツを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. ブラウザを開いて http://localhost:3000 に移動します。
  2. 売上データを示す縦棒グラフが表示されます。

ステップ 5: グラフをカスタマイズする

グラフをカスタマイズするには、API またはデータベース (MySQL や MongoDB など) からの動的データを使用して dataPoints 配列を変更できます。たとえば、静的な売上データをバックエンド サービスから取得したリアルタイムの売上データに置き換えることができます。視覚化のニーズに合わせて、折れ線、棒、円などのさまざまな種類のグラフを試すこともできます。カスタマイズ オプションの詳細については、CanvasJS ドキュメントを参照してください。

結論

CanvasJS を Express.js と統合することで、視覚的に魅力的でインタラクティブな方法でデータを表示する機能が解放されます。ダッシュボードを構築している場合でも、ユーザー インターフェイスを強化している場合でも、この組み合わせにより、データの洞察をより魅力的でアクセスしやすくするシームレスな方法が提供されます。さらに、MySQL や MongoDB などのデータベースから取得したデータを使用してグラフを表示することもできます。これについては今後の記事で説明します。

以上がCanvasJS を使用して Express.js アプリでチャートを表示するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート