ScottPlot

【C# ScottPlot Form】グラフをリアルタイムに表示する簡単な方法

はじめに

C#のグラフライブラリ ScottPlotを使って、グラフをリアルタイムに表示する簡単な方法を、GIF動画と短い全体コード付で解説していきます。

この記事の解説内容

ScottPlotを使ってグラフをリアルタイムに表示する

ScottPlotについて

ScottPlotって何?どう使うの?という方は、先に以下の記事をご覧ください。
概要や、使い方をプロジェクトを作成するところから解説しています。

リアルタイムでグラフ動画

後述のコードで、以下のようなリアルタイムのグラフを作成できます。

全体コード

全体コードは以下の通りです。基本的な流れは、以下の2つです。

  1. グラフデータをオブジェクトに追加
  2. グラフを更新


実際使う場合は、通信など別スレッドで取得したデータを・・・のようになると思いますが
今回はコードをシンプルにするため、Timerでデータの追加・グラフの更新を行っています。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace ScottPlotLiveTest
{

    // 以下のコントロールがFormに追加されていることを
    // 前提にしています

    // ScottPlotのコントロール(FormsPlot1)
    // タイマーのコントロール (timer1)


    public partial class Form1 : Form
    {
        // ポイントデータ格納用です
        List<double> point = new List<double>();

        // ポイントデータの作成に使うカウンタです
        int counter = 0;

        public Form1()
        {
            InitializeComponent();

            // タイマーの処理を開始します
            timer1.Start();

        }

        // タイマーの処理です
        // インターバルは500msに設定しています
        private void timer1_Tick(object sender, EventArgs e)
        {

            // 3周期ごとにY軸を初期化して、のこぎり型の波形を生成します。
            if( counter >= 3 ) { counter = 0; }

            // ポイントデータを追加します
            point.Add(counter + 1);

            // コントロールにポイントデータをセットします
            // 色指定をしないと描画ごとに色が変わってしまうので、指定しています。
            formsPlot1.plt.PlotSignal( point.ToArray(), color : Color.Blue );

            // ポイントデータに合わせて表示範囲を自動調整します。
            formsPlot1.plt.AxisAuto();

            // コントロールを描画します
            formsPlot1.Render();

            // カウンタの更新です。
            counter++;

        }
    }
}

コードのポイント

PlotSignal()でデータのY軸の値を設定します
X軸はデータ追加時に自動的に前回値+1された値がセットされます。

    // コントロールにポイントデータをセットします
            // 色指定をしないと描画ごとに色が変わってしまうので、指定しています。
            formsPlot1.plt.PlotSignal( point.ToArray(), color : Color.Blue );

デフォルトだと更新ごとに線の色が変わって見づらいです。
「color」で線の色を指定すると防止できます。

formsPlot1.plt.PlotSignalXY()でX軸の値をセットすることも出来ます。

まとめ

ScottPlotを使って、リアルタイムにグラフを描画するやり方について解説しました。
参考になればうれしいです。

本家サイトに、配列を大量に確保してLiveデータを表示する方法も載っています。
PlotTypes: Signal - Display first N points

試したところ、非表示に設定したポイントも表示されてしまったので、今回の記事では随時ポイントを追加する方法を紹介しています。
記事のコードでは処理が遅い場合は、本家サイトのやり方も参考にしてみてください。






応援・要望お待ちしてます

ブログを見ていて「この辺を詳しく知りたい」「このライブラリの使い方を知りたい」「こんなことで困ってる」...etc があれば、コメント・問い合わせ・Twitterで教えてください。質問・ご要望に合わせて解説記事を作ります。

ブログを気に入っていただけたり、「応援してもいいよ」という方がいたら、ブログやSNSでの紹介をお願いします。 あたたかい応援は、中の人の更新の大きな励みになります。

ABOUT ME
えす
現役のソフトウェアエンジニアです。 C++ C# Python を使ってます。10年ちょい設計/開発部門にいましたが、今はQAエンジニアっぽいことをしています。

COMMENT

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