先日、あるシステムにグラフ描画機能を追加しました。このシステム自体は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件の返信