20分でできる！チャート表示
Node.js + Express + ejs + Google Chart API
これらを使ってグラフを描画する画面を作ってみましょう
実際やってみると割と簡単にできました！
以下のStepで進んでいきます
ちなみに環境は Mac です
Windowsでも大きな違いは無いと思います
Step1. Node.jsのプロジェクト作成
パッケージ初期化
Nodeを使う時はまずこれですよね！
$ npm init今回はサンプルなので、デフォルトのまま Enter 連発でOKっす
package.jsonが作成されたら次の作業っす
Step2. npm install
Expressをインストール
以下のコマンドを実行してExpressを使えるようにします
$ npm install --save expressExpressの公式サイト↓
https://expressjs.com/ja/
ejsをインストール
ejsはテンプレートエンジンと言われるものです
今回はこのテンプレートでチャート表示に必要な記述を固定して
表示対象のデータだけをテンプレートへ引き渡すようにします
これも以下のコマンドを実行して使えるようにしておきます
ejsの公式サイト↓
https://ejs.co/
Node起動
プロジェクトフォルダ直下に index.js を作成し
以下のコードを貼り付け＆保存してください
const express = require('express');
const app = express();
app.get('/healthz', (req,res,next) => {
return res.status(200).send({'status': 'OK'});
});
app.listen(3000, () => {
console.log('start express ...');
})terminal or コマンドプロンプトで起動します
$ node index.js
start express ...動作確認
ブラウザで確認しましょう
localhost:3000/healthz へアクセスすると
{status: "OK"}と表示されると思います
これが出てれば成功です
Ctrl + C で、一旦Nodeを停止させてください
ガンガンいきましょう！
Step3. GoogleChartのサイトからコードをコピー
本家からサンプル取得
こちらのGoogle公式サイトからサンプルを頂戴します
https://developers.google.com/chart/interactive/docs/gallery
今回はなんとなく Line Chart を使用します
Line Chartの詳細ページへ飛ぶと
サンプルコードが書かれていますので、これをかっさらってきます
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>Step1. で作成したプロジェクトフォルダに views フォルダを追加してください
さらに、 views 配下に charts.ejs というファイルを作成し
上記HTMLを貼り付け＆保存してください
このHTMLを眺めてみると、function drawChart() でグラフを描画するようですね
また var data と定義されている変数の中身がグラフ化するデータで間違い無いでしょう
という事は、この data に表示させたい値を引き渡せばやりたいことができそうです
Step4. 処理をちょこっと書き換える
さて、これでほぼ準備ができました
あとは特定のパスにGETリクエストがきたら
GoogleChartを使ってグラフを表示するだけ！
やりたいことを整理します
- GETメソッドで
/chartsにリクエストがきたらチャートを表示 - 表示する情報はコピーしてきたサンプルと同じ
形にしていきましょう
index.jsを修正
ejsを使えるように、かつテンプレートへ引き渡す処理も書き加えます
const express = require('express');
const app = express();
// テンプレートエンジンの指定
app.set("view engine", "ejs");
app.get('/healthz', (req,res,next) => {
return res.status(200).send({'status': 'OK'});
});
// Google Chart API へ引き渡すデータ
app.get('/charts', (req,res,next) => {
let data = {
items: [
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]
};
return res.render("./charts.ejs", data);
})
app.listen(3000, () => {
console.log('start express ...');
})変更したのはこの部分↓
// テンプレートエンジンの指定
app.set("view engine", "ejs");
...
// Google Chart API へ引き渡すデータ
app.get('/charts', (req,res,next) => {
let data = {
items: [
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]
};
return res.render("./charts.ejs", data);
})テンプレートエンジンの指定 という箇所に関しては
おまじないだと思ってください
大事なのは /charts へGETメソッドでアクセスが来たらdata という変数に表示する情報を格納して ./charts.ejs へ引き渡す
という部分です
テンプレートを修正
先ほど作成した views/charts.ejs を以下のように修正します
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(<%- JSON.stringify(items) %>);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>書き換えたのはここです↓
var data = google.visualization.arrayToDataTable(<%- JSON.stringify(items) %>);<%- %> で括る事で、ejsに渡した情報を表示できます
(この形式だと引き渡したデータをエスケープしないようになります)
加えて、 JSON.stringify() は引き渡したJSONデータを文字列へ変換してくれます
細かい事は分解して理解しましょう
もっと詳細が聞きたい場合は問い合わせフォームからご連絡ください
この記事へのコメントでもOKです
動作確認
お待ちかねの動作確認です
termianl or コマンドプロンプトでNodeを立ち上げます
$ node index.js
start express ...ブラウザで localhost:3000/charts へアクセスしてみましょう
チャートが表示できれば完成です！
お疲れ様でした！！
値を自分で変化させて遊ぶ
ここまでで、細かい事の理解はさておき
ざっくり流れは分かったのではないでしょうか
index.js で引き渡しているデータをDBから取得したものにすり替えたり
また別のAPIを使って外部から取得したデータを設定してみたりするのも面白いですね！
「いや、よくわからん！」という方は、わからなくて良いので
自分でデータを弄ってみましょう。
弄ってみた方が理解が進みますよ！
