前回、【Chart.js】の使い方を学んだので今回は実践として、ビットコイン/円(BTC/JPY)リアルタイムチャートを作成してみました。
Chart.jsでリアルタイムチャートを描画する[Javascript][Chart.js][Websocket]
参考にしたサイト
【リアルタイムチャートをChart.js で作ってみた。】
スポンサーリンク
BTC/JPYリアルタイムチャート デモ
リアルタイムチャートのデモです。自動的にレート情報が流れます。
リアルタイムチャートデモのコード
説明の前に以下、デモのコードの全容です。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>デモ | ビットコイン/円(BTC/JPY)リアルタイムレートを作成してみた</title>
<meta name="description" content="" />
<link rel="stylesheet" href="/demo/common/css/common.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@latest/dist/chartjs-plugin-streaming.min.js"></script>
<!-- Chart.js -->
</head>
<body>
<!-- contents start -->
<div class="container">
<section class="section_mb section_mt">
<div class="inner">
<h2>デモ | ビットコイン/円(BTC/JPY)リアルタイムレートを作成してみた</h2>
<h3></h3>
<div class="graph_box">
<canvas id="btc_jpy"></canvas>
</div>
</div>
</section>
</div>
<!-- contents end -->
</div>
<script src="js/graph02.js"></script>
</body>
</html>
Javascript
// WebSocket
var sock = new WebSocket('wss://ws.lightstream.bitflyer.com/json-rpc');
var sock_params = [{
"method": "subscribe",
"params": {
"channel": "lightning_executions_BTC_JPY",
}
}];
// Websocket message格納用配列
var sock_results = {
'result': []
}
// Websocket 接続
sock.addEventListener('open', function (e) {
sock.send(JSON.stringify(sock_params));
});
// Websocket message受信
sock.addEventListener('message', function (e) {
data = JSON.parse(e.data)['params'];
message = data['message'];
// priceを配列に格納
sock_results['result']['btc_jpy'] = parseInt(message[message.length - 1]['price'])
});
// Chart.js
ctx_btc_jpy = document.getElementById('btc_jpy').getContext('2d');
chart_btc_jpy = new Chart(ctx_btc_jpy, {
type: 'line',
data: {
datasets: [{
label: 'BTC/JPY',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
data: []
}]
},
options: {
scales: {
xAxes: [{
type: 'realtime',
realtime: {
duration: 20000,
refresh: 1000, // デフォルト
delay: 1000,
frameRate: 30, // デフォルト
onRefresh: function (chart) {
chart_btc_jpy.data.datasets.forEach(function (v, i, datasets) {
datasets[i].data.push({
x: Date.now(),
y: sock_results['result']['btc_jpy']
});
});
}
}
}]
}
}
});
リアルタイムチャート作成手順
ここからはBTC/JPYリアルタイムチャート作成手順を説明していきます。
まずは今回のデモの作成に必要なプラグインです。
【Chart.js】【chartjs-plugin-streaming】を使用します。
【Chart.js】を読み込む
Chart.jsのインストールや使用方法については以下をご参考にしてください。
グラフ/チャート作成用JSライブラリ「Chart.js」を試してみた
今回もCDNを利用してscriptを読み込みます。以下をHTMLに記載します。
リアルタイムチャートを作成するのでCDNで読み込むプラグインは、「Moment.js 
」を含んだ「Chart.bundle.min.js 」を使用します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
【chartjs-plugin-streaming】を読み込む
「chartjs-plugin-streaming 」はリアルタイムチャート用のChart.jsの拡張プラグインです。こちらもCDNで読み込みます。
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@latest/dist/chartjs-plugin-streaming.min.js"></script>
HTMLの記述
ポイントはチャートをChart.jsで表示するためのcanvasタグです。
ここにリアルタイムチャートを生成します。
<canvas id="btc_jpy"></canvas>
Javascirptの記述
WebSocket
ビットコインのレート情報を取得するため、「bitFlyer」に「WebSocket」で接続します。
var sock = new WebSocket('wss://ws.lightstream.bitflyer.com/json-rpc');
取得する情報(channel)を記述して購読(subscribe)するための変数。
var sock_params = [{
"method": "subscribe",
"params": {
"channel": "lightning_executions_BTC_JPY",
}
}];
取得した価格(price)を格納するための変数。
// Websocket message格納用配列
var sock_results = {
'result': []
}
Websocket 接続
// Websocket 接続
sock.addEventListener('open', function (e) {
sock.send(JSON.stringify(sock_params));
});
Websocket 受信(message)
// Websocket message受信
sock.addEventListener('message', function (e) {
data = JSON.parse(e.data)['params'];
message = data['message'];
// priceを配列に格納
sock_results['result']['btc_jpy'] = parseInt(message[message.length - 1]['price'])
});
Chart.js
HTMLに記載したDOM要素を取得
ctx_btc_jpy = document.getElementById('btc_jpy').getContext('2d');
Chart.jsのインスタンスとchartjs-plugin-streamingの設定を記述。
chart_btc_jpy = new Chart(ctx_btc_jpy, {
type: 'line',
data: {
datasets: [{
label: 'BTC/JPY',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
data: []
}]
},
options: {
scales: {
xAxes: [{
type: 'realtime',
realtime: {
duration: 20000,
refresh: 1000, // デフォルト
delay: 1000,
frameRate: 30, // デフォルト
onRefresh: function (chart) {
chart_btc_jpy.data.datasets.forEach(function (v, i, datasets) {
datasets[i].data.push({
x: Date.now(),
y: sock_results['result']['btc_jpy']
});
});
}
}
}]
}
}
});
chartjs-plugin-streamingのオプション一覧
| 名前 | タイプ | デフォルト | 説明文 |
|---|---|---|---|
| duration | number | 10000 | データの表示時間 |
| ttl | number | 保持されるデータの期間 設定しない場合、グラフから自動的に削除 | |
| delay | number | 0 | チャートに表示される遅延時間 |
| refresh | number | 1000 | データの更新間隔 |
| onRefresh | function | null | refresh後に呼び出されるコールバック関数 |
| frameRate | number | 30 | グラフがディスプレイに描画される頻度 |
| pause | boolean | false | trueでスクロール停止(onRefreshは呼び出される) |
まとめ
- グラフを描画する時は「Chart.js」を使う。
- リアルタイムチャートを作成する時はChart.jsの拡張プラグイン「chartjs-plugin-streaming」を使う。
- 「bitFlyer」に「WebSocket」で接続して必要情報を取得する。
関連リンク
グラフ/チャート作成用JSライブラリ「Chart.js」を試してみた
スポンサーリンク
