10yroの開発日記

福岡にある株式会社10yro(トイロ)のエンジニアが書いています

C# WPFでOxyPlotを使って折れ線グラフを描画する

今回はC#WPFで、OxyPlotを使って折れ線グラフを描画したいと思います。
折れ線グラフの横軸に時間(0時~23時)、縦軸は0~10のランダムな値を設定します。

事前準備

WPFのプロジェクトを作成し、NuGetでOxyPlot.Wpfをインストールします。
.NET.Core 3.1を使います。

PlotModelの生成

今回はOxyPlotのPlotViewを使います。
MainWindow.xaml.csにOxyPlot.PlotModelのプロパティを定義し、このプロパティに折れ線グラフのデータを設定します。

プロパティを追加。

/// <summary>
/// PlotModel
/// </summary>
public OxyPlot.PlotModel PlotModel { get; set; } = new OxyPlot.PlotModel();

折れ線グラフのデータを作成し、PlotModelプロパティにセット。

横軸(時間)の定義

13行目~22行目で、横軸(時間)の定義をしてPlotModelのAxesに設定しています。

縦軸の定義

25行目~35行目で、縦軸の定義をしてPlotModelのAxesに設定しています。

グラフの線の定義

38行目~47行目で、グラフの線の定義をしてPlotModelのSeriesに設定しています。 ItemsSourceに10行目で生成しているグラフのデータを設定します。

グラフの更新

最後に50行目でグラフの更新を行っています。 AxesやSeriesの定義を変更した場合はInvalidatePlotを行います。

Xaml

MainWindow.xamlでPlotViewを使えるようにWindowタグに以下を追加します。

xmlns:oxy="http://oxyplot.org/wpf"

PlotViewタグを追加し、csに追加したPlotModelのプロパティをBindingします。
ここに折れ線グラフが描画されます。

<oxy:PlotView Model="{Binding PlotModel}"></oxy:PlotView>

画面表示

上記コードを実行すると、以下のようなグラフが描画されました。

参考

いろいろなグラフが描画できるみたいです。
OxyPlotのドキュメントは以下となります。

oxyplot.readthedocs.io

ソースコード

以下に置いています。

github.com