C# PR

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

記事内に商品プロモーションを含む場合があります

はじめに

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

本内容のScottPlot Ver.4.0系を使う方法は、データ数によって描画が止まるなどの現象が出るようです。リアルタイム描画を試してみたい方は以下のVer.4.1系を使う方法をご利用ください。

この記事の解説内容

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

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

お知らせ

今月号のSoftware Designは「もっとTypeScriptの力を引き出そう」

JavaScriptの拡張言語でしょ?と思っているかたへ、Union型などTypeScriptの持つ秘めたる力を解説する特集となっています。

個人的には第2特集の「Ubuntuの現代的な使い方」がの方が気になりました。より詳しい内容は以下のリンクからご覧ください。

編集:Software Design 編集部
¥1,562 (2024/04/27 07:44時点 | Amazon調べ)
\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング


質問・要望 大歓迎です

「こんな解説記事作って」「こんなことがしたいけど、〇〇で困ってる」など、コメント欄で教えてください。 質問・要望に、中の人ができる限り対応します。

使えたよ・設定できたよの一言コメントも大歓迎。気軽に足跡を残してみてください。記事を紹介したい方はブログ、SNSにバシバシ貼ってもらってOKです。

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

POSTED COMMENT

  1. あお より:

    参考になりました、どうもありがとうございます。

    • えす より:

      あおさん、こんにちは。
      えすです。

      コメントありがとうございます。お役に立ててうれしいです。

      他にも気になるところなどあれば、お気軽にコメントしてくださいね。

COMMENT

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