はじめに
ScottPlotの新しいバージョン「4.1」を使って、線付の散布図(ScatterPlot)をリアルタイムに描画する方法を紹介します。
ScottPlotはあくまで「大量の固定長のデータ」を高速に描画・操作することを念頭においたライブラリです。リアルタイムでのグラフ描画は現状、「おまけ機能」的な扱いなので、「ScottPlotを使ってちょっと動的なグラフ描画を試してみたい」という方に向けて解説します。
なお、以前ご紹介した4.0系の方法は描画が止まるなどの現象が発生するようです。リアルタイムでの描画を試して見たい方はこちら4.1系の方法を推奨します。
ScottPlotはあくまで「大量の固定長のデータ」を高速に描画・操作することを念頭に開発されています。今回の紹介する方法でリアルタイム描画も可能ですが、現状「おまけ」程度の機能ですので予めご了承ください。
Ver.4.0系のこの記事の方法は、描画を続けていくと描画自体が止まるなどの現象がでるようです。今回のVer.4.1の方法では少なくとも100ポイント程度の描画が止まることは無いのでVer.4.1の方法を推奨します。
参考にした公式のFAQ
今回の記事は公式ページの以下の内容を元に作成しています。
公式FAQ:User Control: Live Data
https://swharden.com/scottplot/faq/live-data/#growing-data-with-scatterplotlist
環境
環境 | バージョンなど | 備考 |
VisualStudio | 2019 Community | 2017でも使用できます |
.NET | 4.7.2 | |
プロジェクト | Formアプリケーション(.NET Framework) | |
ScottPlot | 4.1.16 |
実行結果
後述する、「のこぎり状の波形をタイマーで動的に表示するコード」の実行結果は以下の通りです。
全体コード
のこぎり状の波形をタイマーで動的に表示するコードです。
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 FormScottPlot41_RealTime
{
// 以下のコントロールがFormに追加されていることを前提にしています
// ScottPlotのコントロール(FormsPlot1)
// タイマーのコントロール (timer1)
public partial class Form1 : Form
{
// 動的にポイントを追加できるScatterPointListを作成します。
ScottPlot.Plottable.ScatterPlotList pointList = new ScottPlot.Plottable.ScatterPlotList();
// 波形の生成に使うカウンタです
int counter = 0;
double point = 0.0;
public Form1()
{
InitializeComponent();
// ScottPlotのコントロールに、ScatterPointListを追加します。
formsPlot1.Plot.Add(pointList);
// タイマーの処理を開始します
timer1.Start();
}
//
// タイマーの処理です
// インターバルは100msに設定しています
//
private void timer1_Tick(object sender, EventArgs e)
{
// 3周期ごとにY軸を初期化して、のこぎり型の波形を生成します。
if ( counter % 3 == 0) { point = 0.0; }
// pointListにデータを追加します。
// 既にコントロールにも追加しているので、ここで追加したデータも
// Render()の際に合わせて表示されます
pointList.Add( counter, point);
// ポイントデータに合わせて表示範囲を自動調整します。
formsPlot1.Plot.AxisAuto();
// コントロールを描画します
// pointList
formsPlot1.Render();
// カウンタの更新です。
point++;
counter++;
// 一定数でグラフを初期化します。
if( counter > 100 )
{
pointList.Clear();
counter = 0;
point = 0;
}
}
}
}
コードのポイント
ScatterPlotList
通常のScatterPlotではなく、動的にポイント情報が追加可能な「ScatterPlotList」を作成し、手動でScottPlotのコントロールに追加します。
// 動的にポイントを追加できるScatterPointListを作成します。
ScottPlot.Plottable.ScatterPlotList pointList = new ScottPlot.Plottable.ScatterPlotList();
// ScottPlotのコントロールに、ScatterPointListを追加します。
formsPlot1.Plot.Add(pointList);
ScatterPlotListへのデータ追加
ScatterPlotListのAdd関数を使って、ポイント情報を追加しています。
前述したコードでScottPlotのコントロールと、ScatterPlotListはリンクしている状態になるので、Add関数でポイント情報を追加して、Render()を呼び出すだけで、動的なグラフを描画することが出来ます。
// pointListにデータを追加します。
// 既にコントロールにも追加しているので、ここで追加したデータも
// Render()の際に合わせて表示されます
pointList.Add( counter, point);
まとめ
ScottPlotの新しいバージョン「4.1」を使って、線付の散布図(ScatterPlot)をリアルタイムに描画する方法を紹介しました。おまけ程度の機能ですが、「ScottPlotでリアルタイムにグラフを描画したい!」という方の参考になればうれしいです。
伝わるグラフを作る
この記事の読者の方々は、少しでも「分かりやすく」「見やすく」といったことも考えてアプリケーションを作られている方が多いと思います。それだけでも十分に素晴らしいですが、「そもそもどんなグラフがユーザーにとって分かりやすいか?」といった、デザインやUXの知識・視点も結構おもしろいです。
以下の本など、比較的手軽な値段で読める書籍がいくつかあるので、ぜひ覗いてみてください。
応援・要望お待ちしてます
ブログを見ていて「この辺を詳しく知りたい」「このライブラリの使い方を知りたい」「こんなことで困ってる」...etc があれば、コメント・問い合わせ・Twitterで教えてください。質問・ご要望に合わせて解説記事を作ります。
ブログを気に入っていただけたり、「応援してもいいよ」という方がいたら、ブログやSNSでの紹介をお願いします。 あたたかい応援は、中の人の更新の大きな励みになります。