このチュートリアルでは、多用途のチャートライブラリであるbillboard.jsを使用して、Node.jsアプリケーション内にインタラクティブなチャートを作成する方法を説明します。Node.js自体はブラウザで直接チャートをレンダリングしませんが、代わりにクライアントサイドライブラリであるbillboard.jsを利用して、Node.js環境内でチャートレンダリングに必要なHTML、CSS、JavaScriptを提供します。
目次
billboard.jsの概要
billboard.jsは、D3.jsを基盤とした堅牢なJavaScriptチャートライブラリです。クリーンなAPIにより、折れ線グラフ、棒グラフ、面積グラフ、散布図など、さまざまな種類のチャートの作成が簡素化されます。軽量性、広範なカスタマイズオプション、包括的なドキュメントにより、Node.jsアプリケーションへのチャートの統合に最適です。クライアントサイドで完全に動作するため、billboard.jsはパフォーマンスと応答性の向上を保証し、Node.jsサーバーは他のタスクを管理できます。
billboard.jsの前提条件
始める前に、以下のものがあることを確認してください。
- Node.jsとnpm（またはyarn）：Node.jsの公式ウェブサイトからNode.jsとnpm（Node Package Manager）またはyarnをダウンロードしてインストールします。
- HTML、CSS、JavaScriptの基本的な理解：billboard.jsはチャート作成を簡素化しますが、基本的なWeb開発の知識は役立ちます。
- コードエディタまたはIDE：コードを記述するための好みのコードエディタ（VS Code、Sublime Text、Atomなど）を選択します。
注：クライアントサイドライブラリであるため、npmを介してNode.jsプロジェクトにbillboard.jsを直接インストールしません。代わりに、HTMLの“タグを介して含めます。
シンプルな折れ線グラフの作成
この例では、基本的な折れ線グラフを示します。billboard.jsとチャートコードを含むHTMLファイルを配信するNode.jsサーバーをセットアップします。
1. プロジェクトのセットアップ：ディレクトリ（例：`node-chart-example`）を作成し、その中に以下のファイルを作成します。
2. `index.js`（Node.jsサーバー）：
const http = require('http');
const fs = require('fs');
const path = require('path'); // パスの処理を改善するために追加
const server = http.createServer((req, res) => {
const filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
fs.readFile(filePath, (err, data) => {
if (err) {
res.writeHead(404);
res.end('File not found');
} else {
const extname = path.extname(filePath);
const contentType = extname === '.html' ? 'text/html' : 'application/javascript';
res.writeHead(200, { 'Content-Type': contentType });
res.end(data);
}
});
});
const port = 3000;
server.listen(port, () => {
console.log(`Server listening on port ${port}`);
});
3. `index.html`（チャートを含むHTMLファイル）：
<html>
<head>
<title>Billboard.jsチャート</title>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = bb.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'line'
}
});
</script>
</body>
</html>
4. サーバーを実行：プロジェクトディレクトリに移動し、`node index.js`を実行します。`http://localhost:3000`でチャートにアクセスします。
高度なチャートのカスタマイズ（オプション）
billboard.jsは広範なカスタマイズを提供します。軸ラベル、色、ツールチップ、データ操作など、その機能についてはドキュメントを参照してください。さまざまなチャートの種類とオプションを試して、魅力的な視覚化を作成してください。