【WPF】いちばんやさしい Oxy Plot の使い方(WindowsForm共通)

当ページのリンクには広告が含まれています。

OxyPlotはWPFとWindowsFormの両方で使える、フリーのチャートコントロールです。

WPFではマイクロソフト標準のMSChartコントロールが搭載されなくなったため、フリーのチャートコントロールとしてLiveChartsより高速に動作するという点でアドバンテージがありました。

しかし、ScottPlot が登場してからは、そのアドバンテージも失われてしまいましたが、今でも多く使われていて、ユーザーによるHow To 記事も豊富です。

そこで、今回は Oxy Plot について取り上げたいと思います。

目次

OxyPlotの概要

OxyPlotのグラフ描画機能としては、一般的なもの(折れ線、散布図、棒、円、ヒートマップ)は用意されています。

OxyPlotが他のチャートコントロールより勝る点としては、マルチプラットフォームが挙げられ、WPF、WindowsFormの他、UWP、Silverlight、WindowsPhon、Android、Mac、iPhone に対応しています。

様々なプラットフォームに対応したアプリを作成する場合、OxyPlot一択になると思います。

公式サイトも用意されていますが、サンプルソースと異なる画像が掲載されている箇所が多く、決して分かりやすいとは言えません。

PDFのマニュアルも公開されていますが、2015年1月と古く、公式サイトと同様にサンプルソースと異なる画像が掲載されています。

ここがマイナスポイント

円グラフや複数の折れ線を描画する際の色合いが微妙です。

凡例の1つ目と2つ目の色が近すぎて、パッと見た感じ同じに見えてしまいます。

円グラフにしても、各要素が濃いめの色なので、そこに黒文字が書かれると、これも決して見やすいとは言い難いです。

文字色も背景色もプロパティで変更できるので、見栄えを整えることは可能ですが、例えば10個の折れ線を表示したり、10項目で円グラフを書く場合、10種類の色を設定する必要があるため面倒です。

この辺は、OxyPlot、LiveChats、ScottPlot、MsChartの方が色遣いが上手です。

インストール方法

Nuget から oxyplot で検索すると、WPF版とWindows Formが表示されますので、お好きな方をインストールして下さい。

Nugetの使い方に関しては、こちらの記事に記載しています。

使い方

インストールに成功すると、WindowsFormの場合はツールボックスにコントロールが表示されます。

但し、ScottPlotやLiveChartsの様なコントロールのイメージは、張り付けた場所に表示されません。

WPFの場合は、LiveChartsと同様にツールボックスには表示されないので、XAMLでコードを記述する必要があります。

OxyPlotの構造

OxlPlotは1種類のコントロールで様々なグラフを書くことが出来ます。

描画手順は、PlotModel のオブジェクトを生成し、それにタイトルや軸、プロットデータをセットした後に、コントロールの Model プロパティにセットすればOKです。

グラフの種類は、 PlotModelのSeriesプロパティにセットするSeriesの種類によって変わります。

2020年12月において、20種類のSeriesが用意されていることから、20種類のグラフがサポートされているはずですが、サンプルソースと添付されているグラフの形状が異なるため、ドキュメントからどのようなグラフが描画できるかが分かりません。

実際に私が試したSeriesについて、情報を共有しておきます。

種類シリーズプロットデータの型プロットデータの登録方法
折れ線グラフLineSeriesDataPointLineSeries.Points.Add()
散布図ScatterSeriesScatterPointScatterSeries.Points.Add()
円グラフPieSeriesPieSlicePieSeries.Slices.Add()
縦棒グラフColumnSeriesColumnItemColumnSeries.ItemsSource=
積み上げグラフColumnSeries
(縦棒グラフと同じ)
ColumnItem
(縦棒グラフと同じ)
ColumnSeries.ItemsSource=
(縦棒グラフと同じ)
横棒グラフBarSeriesBarItemBarSeries.ItemsSource=
箱ひげ図BoxPlotSeriesBoxPlotItemBoxPlotSeries.Items.Add()

サンプルソース

それでは、次の線グラフを描画するためのサンプルソースで少し詳しく解説していきます。

今回は、コントロールに "uxChart1" という名前を付けています。

XAMLのソースコード

以下がXAMLのソースコードです。

まず、参照設定として次の1行を記述しています。

コントロールは次のような記述になります。

では、次にC#のソースコードです。

C#のソースコード

こちらも参照設定が必要なので、冒頭に次の3行を記述しておきます。

折れ線グラフのデータを作る部分、チャート全体の設定、折れ線グラフを描画するという3つの構成になっています。

縦軸、横軸のクラスである Axis は、軸の内容毎に用意されたものを使う必要があります。

Axisを特に設定しない場合、LinearAxisが指定されたものとして動作するようです。

Axisのクラスは9種類用意されていますが、よく使いそうな5種類について紹介しておきます。

内容クラス名想定される用途
連続した数値LinearAxis折れ線、散布図
日付・時刻DateTimeAxis折れ線の横軸
時間間隔TimeSpanAxis折れ線の横軸
カテゴリーCategoryAxis棒グラフのラベル
対数LogarithmicAxis対数グラフ

まとめ

今回は フリーのグラフ(チャート)描画コントロールである OxyPlot について、その構造とサンプルを交えた使い方について解説しました。

デザインは美しいのですが、描画速度が遅いという弱点があります。

10万件の折れ線グラフを4つ描画しても、0.5秒以下で描画されるので、LiveCharts に比べてかなり高速だと言えます。

特に何も設定しないデフォルト状態だと、補助線が引かれなかったり、色の配色が見難かったりと言う課題もあるので、見栄えについては各種プロパティの設定を行う必要がありますが、おおむね使いやすいチャートコントロールではないかと思います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次