node.js + Express環境におけるchart.jsの使い方

先日、あるシステムにグラフ描画機能を追加しました。このシステム自体はnode.js + Expressな環境でしたので、これにchart.jsを組み合わせてみることにしました。

私がnode.jsをよく理解していないためですが、調べてもこの組み合わせだとあまり例が出てきません。本来は特にこの環境に特化した部分はほとんどないようですが、当てはめに一日時間をかけて理解したので、メモがてら記事化しておきます。

[routes]
一般的な構成では、routes/index.jsがMVCでいうところのCにあたると思います。私はここでデータの読み込みを行うことにしました。

今回はJSON形式のデータファイルがあるという前提でしたので、ここから1行ずつ読み込んで処理します。node.jsでファイル読み込みを調べると非同期処理の例がたくさん出てきてこれまた困っていたのですが、ここでは「n-readlines」という素晴らしいライブラリにたどり着きました。

おおよそのソースコードは以下のような構造です。

var nreadlines = require(‘n-readlines’);

router.get(‘/?????’, function (request, response) {
dataList = new Array();
var liner = new nreadlines(‘ファイル名’);
var line;
while (line = liner.next()) {
var data = JSON.parse(line);
….
dataList.push( { x:???, y:??? } );
}
response.render(‘?????’, { dataList:dataLust });
});

[views]
私はグラフ描画用の画面を一つ用意することにしたので、views/graph.ejsのようにしました。

その中身はおおよそ以下のようになります。

<head>
….
<script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js”></script>
….
</head>
<body>
<canvas id=”myChart” width=”400″ height=”300″></canvas>
<script>
var dataList = <%- JSON.stringify(dataList) %>;
var ctx = document.getElementById(‘myChart’).getContext(‘2d’);
var myChart = new Chart(ctx, {
data: {
datasets: [{
type: ‘line’,
label: ‘data’,
fill: false,
data: dataList,
borderColor: “rgba(0,0,0,0)”,
backgroundColor: “rgba(255,150,0.9)”
}]
},
options: {
scales: {
xAxes: [{
type: ‘linear’,
position: ‘bottom’,
scaleLabel: {
display: true,
labelString: ‘xlabel’
},
ticks: {
min: 0,
max: 1000,
stepSize: 100
}
}],
yAxes: [{
type: “linear”,
scaleLabel: {
display: true,
labelString: ‘y’
},
ticks: {
}
}]
}
}
});
</script>
</body>

 

カテゴリー: ソフトウェア, 技術資料・メモ タグ: ,
node.js + Express環境におけるchart.jsの使い方” への1件のコメント
1 Ping/トラックバック のために "node.js + Express環境におけるchart.jsの使い方"
  1. […] 現地と八王子キャンパスでの観測データ整理の利便性向上のため、Chart.jsを用いたデータのグラフ化も行いました。単におおよその傾向をさっと視認するために作ったのですが、カーソ […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

*