WPF はじめての OxyPlot

WPFはチャート難民？

本気でチャートを使いたい民は、グレープシティ、インフラジスティックス、SciChartなど有料コンポーネントを使うのか・・・？

さらっと公式HPを見た感じだと LiveCharts.Wpf が良さそうだったけど、残念ながら .NET Core 3.1 に対応していない

なので代わりに OxyPlot.Wpf をプロジェクトに導入する

成果物

本記事で掲載しているコードの元プロジェクト

※ GitHubのほうは随時更新する予定

WPFでOxyPlotをつかう

（いろいろ調べている中で予感はしていたけど、ドキュメントの整備が行き届いていない）

プロジェクトを立ち上げたら以下 NuGet パッケージをインストールする

Install-Package OxyPlot.Wpf

とりあえずグラフを描いてみる

Docs » Getting started » WPF

チュートリアルの通りにコピペして実行すると、緑色のコサインカーブが表示される

グラフの細かいところを変更する

Qiita記事から部品取りしていくのが早い

記事	おすすめポイント
[C#] oxyplotでグラフを書く1	コードが長く載っているので、必要なところだけ取って使える
【更新あり】OxyPlotでグラフを表示させる際にハマったことまとめ	「おまけ」の章に、いろいろ細かい設定をする方法が載っている
[C#] OxyPlot Tips集	やりたいことごとに章分けされている

プロットを更新する

手順が3つ書かれているが、XAMLへPlotModelをバインディングしている場合は、PlotModel.Invalidate(true)を呼べばグラフが更新される

Case1: グラフを書き換える

Clear()して、データをAddして、InvalidPlot(true)をする

MyModel1.Series.Clear();
MyModel1.Series.Add(new FunctionSeries(Math.Sin, 0, 10, 0.1, "sin(x)"));
MyModel1.InvalidatePlot(true);

Case1' グラフの上に別のグラフを描く

Clearしなかった場合は、既存のプロットに追加される

//MyModel1.Series.Clear();
MyModel1.Series.Add(new FunctionSeries(Math.Sin, 0, 10, 0.1, "sin(x)"));
MyModel1.InvalidatePlot(true);

Case2: グラフのプロットを追加する

すでにあるプロットにデータを追加していく
PlotModelのシリーズを別途保持（_lineSeries）しておいて、そこにAddする

var x = DateTime.Now.Second;
var y = new Random().Next(-100, 100);

_lineSeries.Points.Add(new DataPoint(x, y));

MyModel2.InvalidatePlot(true);

Case3: モデルのデータをプロットする

データはViewModelとは別にモデルで持っておきたい

MyModel3 = _plotModelHandler.Create();
_plotModelHandler.Update();

//----------------------------------
// Model
_model.Axes.Add(XAxis); // 軸の最大値などを設定している
_model.Series.Add(_series); // モデルがデータを保持している

internal void Update()
{
    var x = new Random().Next(0, 1023);
    var y = new Random().Next(0, 4065);
    _series.Points.Add(new DataPoint(x, y));

    _model.InvalidatePlot(true);
}

おわりに

凝ったことしなければ、シンプルで使いやすいライブラリだと思う

参考サイト