Chart.jsによる波形描画テスト

波形更新を全体リロードではなく、グラフのみ再描画できないかと思っています。

で、まずはデータ取り込み無しでどうやったらできるか調べてみました。更新開始を押すと正弦波波形を描画し始めます。

これは途中部分を切り出して埋めていますが、全体のHTMLファイルはこちら。

<!DOCTYPE HTML>
<html lang="ja">

<head>
  <meta charset="utf-8">
 <title>Chart.jsによる波形描画テスト</title>
</head>

<body>
  <h1>Chart.jsによる波形描画テスト</h1>
  <HR>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
    <canvas id="Chart1" width="auto" height="auto"></canvas>
    <script>
      chartVal = [];     // グラフのデータを保持
      chartConfig = {    // グラフの描画パラメータを保持
          type: 'scatter',
            data: {
              datasets: [{
                label: 'sin' ,showLine: true ,lineTension: 0 ,fill: false ,
                borderColor: "rgba(  0,  0,255,0.5)" ,borderWidth: 1 ,pointRadius: 1 ,data : chartVal
              }]},
            options:{
              scales:{
                xAxes: [{
                  gridLines: { color: "rgba(255, 0, 0, 0.2)", zeroLineColor: "black"    },
                  type: 'time',
                  time: { unit: 'second', displayFormats: { second: 'H:mm:ss' }, },
                }],
                  yAxes: [{
                    ticks :{
                      userCallback: function(tick) {
                        return tick.toString() + 'V'
                      }
                    },
                    gridLines: { color: "rgba(0, 0, 255, 0.2)", zeroLineColor: "black" },
                }]
              },
              animation: false
            }
        };

      // グラフ描画処理
      function drawChart() {
	    var context = document.getElementById('Chart1');
	    window.Chart1 = new Chart(context, chartConfig); // グラフのインスタンスをグローバル変数で生成
      }

      function Redraw() {
        if (Chart1) { Chart1.destroy(); } // すでにグラフ(インスタンス)が生成されている場合は、グラフを破棄する
        drawChart(); // グラフを再描画
	  }

      drawChart();

      function Update() {
        chartVal.push({x:Date.now(),y: 10 * Math.sin(2 * Math.PI * Date.now() / 5000 )}) // 最後に5秒周期の正弦波データを付加する。
        if(chartVal.length > 100) chartVal.shift();  // 要素数が100以上の時は先頭のデータを破棄する
        Redraw();
	  }

//    timerID = setInterval( Update , 100);  // 100ms周期

      </script>
      <!-- グラフ更新ボタン -->
      <button type="button" id="btn1">更新開始</button>
      <script>
      document.getElementById('btn1').onclick = function() {
        timerID = setInterval( Update , 100);  // 100ms周期
      }
      </script>
      <button type="button" id="btn2">更新停止</button>
      <script>
      document.getElementById('btn2').onclick = function() {
        clearInterval(timerID);
      }	
      </script>
</body>
</html>

まあまあな感じ?
バックグラウンドに持っていくと、SetInterval() が手抜き?しているのが見えて面白いかも。

おまけのメモ

Javascriptがほぼ初めての状態の自分には、JavascriptのREPL環境ないと不便なので、LinuxMint20LTS環境にさくっと node.js をインストールしてみました。

LinuxMintの場合はUbuntuの公式リポジトリを使うのが簡単なようです。https://github.com/nodesource/distributions/blob/master/README.md に従ってインストールします。

$ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
$ sudo apt-get install -y nodejs
$ node
Welcome to Node.js v14.16.0.
Type ".help" for more information.
> 

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)