【Chart.js】を使ってリアルタイムチャートを作成してみた

2020-07-08

前回、【Chart.js】の使い方を学んだので今回は実践として、ビットコイン/円(BTC/JPY)リアルタイムチャートを作成してみました。

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のインストールや使用方法については以下をご参考にしてください。

Fetch failed: 404 リンクエラー

今回もCDNを利用してscriptを読み込みます。以下をHTMLに記載します。

<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のオプション一覧

名前タイプデフォルト説明文
durationnumber10000データの表示時間
ttlnumber保持されるデータの期間
設定しない場合、グラフから自動的に削除
delaynumber0チャートに表示される遅延時間
refreshnumber1000データの更新間隔
onRefreshfunctionnullrefresh後に呼び出されるコールバック関数
frameRatenumber30グラフがディスプレイに描画される頻度
pausebooleanfalsetrueでスクロール停止(onRefreshは呼び出される)

まとめ

関連リンク

Fetch failed: 404 リンクエラー