【Chart.js】動くグラフを作る

ぺっとぴーぶ

初投稿です。
別のプラットフォームでぼちぼち投稿してたのですが、色んな事を書き留めたくなったのでnoteへ引っ越してきました。

Chart.jsとは？

Chart.jsは、シンプルで使いやすいチャート(グラフ)生成ライブラリです。
おしゃれで、動きのあるチャートを簡単に生成することができます。

参考: https://tr.you84815.space/chartjs/index.html

主にフロントエンドでグラフをお手軽に作成するためのライブラリです。

グラフサンプル

↑こんな感じのができます。
これを動かしたいなぁというお話です。

作り方

基本的にAjaxやWebSocketといった「非同期通信」でストリーミングされている値を描写していきます。
今回はその代替として、以下の関数で擬似的に非同期通信を再現します。
用途に応じてここをSocketやjsonから取得する処理に変えるとOKです。

   /* JavaScript */
   var val   = 0;
   var angel = 0;

   /* 呼び出し毎に36度進んだ正弦を返す */
   function getValue() {
     val = Math.sin(angel * (Math.PI / 180));
     angel = (angel + 36) % 360;
     return val;
   }

リアルタイムでの描画は「chartjs-plugin-streaming」というプラグインを導入して実現します。

<!-- HTML -->
<!DOCTYPE html>
<html lang = "ja">
<head>
   <meta charset = "utf-8">
</head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@latest/dist/chartjs-plugin-streaming.min.js"></script>
<!-- ここで自分が定義した関数を読み込む -->
<script type="text/javascript" src="./myScript.js"></script>
<style>
 #canvas-container {
   width: 50%;
 }
</style>
<body>
 <div id="canvas-container" class="inline-block">
   <canvas id="myChart" width="20" height="10"></canvas>
 </div>
</body>

<script>
   var ctx = document.getElementById('myChart').getContext('2d');
   var chart = new Chart(ctx, {
     type: 'line',
     data: {
       datasets: [{
         label: '値',
         fill: true,
         data: [],
         backgroundColor:'rgba(255, 99, 132, 0.2)',
         borderColor:'rgba(255, 99, 132, 0.8)',
         lineTension: 0.5
       }]
     },
     options: {
       legend: {
         position: 'bottom'
       },
       title: {
           display: true,
           text: '動くグラフ',
           fontSize: 24
       },
       scales: {
         xAxes: [{
           type: 'realtime',
           distribution: 'series',
           // x軸を非表示
           ticks: {
               callback: function(value, index, values){
                   return null
               },
           },
           realtime: {
             duration: 10000,
             delay: 1000,
             refresh: 1000,
             frameRate: 30,
             onRefresh: function(chart) {
               chart.data.datasets[0].data.push({
                   x: Date.now(), // タイムスタンプ
                   y: getValue()  // ここで定義した関数を指定
               });
             },
           },
         }],
         yAxes: [{
           ticks: {
               min: -1,
               max: 1
           }
         }]
       }
     }
   });
   
   </script>
</html>

options.scales.xAxes.realtime で細かい設定が行えます。
【duration】
何秒間のデータを表示するか。今回だと10秒
【delay】
データが表記されるまでの遅延。０秒だと計算中のデータを取りにいったりいかなかったり・・・
【refresh】
後述するonRefreshを呼び出す間隔
【freamRate】
チャートがディスプレイに描画される頻度（フレーム/秒）
【onRefresh】
更新するたびに呼び出されるコールバック関数
今回は、x軸に現在時刻/y軸にgetValue関数の戻り値
を設定し、データを追加する。

動作確認

周期10秒の正弦波が出力されたら成功です。(gif貼り付けが出来ない...)

おまけ

Raspberry Pi等のマイコンで温度計測して、結果をWebでモニターする想定で作ってみました。
IoT機器の管理画面を作る際のアクセントとして有効かもしれません^^v

画像2


この記事が気に入ったらサポートをしてみませんか？