【WPF】OxyPlotで楽々グラフ(チャート)描画!関数化してみました!

プログラミング入門
この記事は約8分で読めます。

OxyPlotのインストール方法や使い方については、こちらの記事に記載しましたが、使用頻度が高そうなグラフについて簡単に描画が出来るように関数化(メソッド化)してみました。

引数にOxyPlotのコントロールと描画したいデータを渡すと描画してくれます。

後々に拡張や修正がしなすいよう、必要最小限のプロパティを使っていますので、ご自身の用途に応じてカスタマイズして下さい。

グラフ(チャート)の種類

この関数(メソッド)を使えば、次のグラフ(チャート)が簡単に描画できます。

サンプルプログラム

サンプルプログラムを例に、OxyPlotの使い方を解説していきたいと思います。

画面レイアウト

チャート1~チャート3までタブで分かれていて、合計9個のOxyPlotコントロールを張り付けています。

描画ボタンをクリックすると、全てのチャートが描画される仕様です。

サンプルのダウンロード場所

サンプルプログラムのソースは下記からダウンロードできるようになっています。

今回は Nuget で取得した OxyPlot.Wpf.2.0.0 のライブラリも同梱していますので、任意のフォルダに解凍の上、Visual Stduio 2019 でプロジェクトを開けば、ビルドできると思います。

関数(メソッド)の使い方

ScottPlotを関数化した時と同様、グラフ描画はDrowから始まるメソッド名になっています。

チャート(グラフ)名関数(メソッド)名内容
折れ線グラフDrawLine単一の折れ線グラフを描画
折れ線グラフ(複数)DrawLine複数の折れ線グラフを描画
散布図DrawScatt散布図を描画
円グラフDrawPie円グラフを描画
縦棒グラフDrawColumn縦棒グラフを描画
横棒グラフDrawBar横棒グラフを描画
棒グラフ(グルーピング)DrawGroupColumn複数の棒グラフをグルーピングして描画
積み上げグラフDrawStack積み上げグラフを描画
箱ひげ図DrawPopulations箱ひげ図を描画

第一引数にコントロール、第2引数にタイトル、第三引数以降に描画データ(プロットデータ)を渡します。

コントロール名が “uxChart1” で、xs にX方向のデータ、ysにY方向のデータが格納されている場合は次の様になります。

第三引数であるプロットデータには、大きく分けて2種類の形式があります。

1つは、プロットデータの配列を渡す形式で、折れ線や棒グラフ、円グラフ、散布図の時に使用します。

もう1つは、複数の折れ線グラフ、グルーピングした棒グラフ、積み上げグラフなどのように1つのチャートコントロールに複数のグラフを描画する場合で、こちらはタプルをリスト形式で渡すようになっています。

詳しくはソースコードを見て頂くとして、ここではポイント説明しておきます。

単独の折れ線グラフ、散布図

これらはプロットデータを配列形式で引数に渡します。

例えば、折れ線グラフの場合は次の様になります。

箱ひげ図

箱ひげ図については、単純に1次元配列のデータを引数に渡すだけで描画するようになっています。

OxyPlotでは箱ひげ図に必要な統計情報を計算するメソッドが存在しないため、Webサイトに公開されている統計情報計算用のソースコードをクラス化し、DrawPopulations の中で計算しています。

縦棒グラフ、横棒グラフ

縦棒グラフ、横棒グラフともプロットデータとして2つ渡すのは折れ線や散布図と同じですが、横軸がdouble型配列ではなく、文字列配列になっているところが異なる点です。

円グラフ

円グラフは、ラベルと対応する値の配列を描画データとして渡します。

複数の折れ線グラフ

タプルのリスト形式で描画データを指定します。

タプルで、凡例タイトル(legend)、X座標の配列、y座標の配列を1まとまりにして、リストに追加していき、そのリストを引数に渡します。

縦棒グラフ(グルーピング)、積み上げグラフ

これらは複数の値をグループ化して、まとめて表示するチャートであるため、タプルのリスト形式でプロットデータを設定します。

グループ化が少し分かりづらいかもしれませんが、項目名と内訳と考えてもらえれば分かりやすいかと思います。

OxyChartもLiveChartsやScottPlotと同様、項目名と内訳という考え方でプロットデータをセットすれば良いようにしています。

このサンプルソース上では group という変数名を使っていますが、明細(detail) とか、内訳(breakdown) という変数名の方が分かりやすかったかもしれませんね。

ソースコード

サンプルプロジェクトをダウンロード&解凍したあと、プロジェクトをVisual Studioで開くと、次のレイアウトが表示されます。

タブページが3つあり、1ページ目と2ページ目には4つ、最後の3ページ目には1つ、合計9個のOxyPlotのコントロールを張り付けていますが、デザイナー上では特に何も表示されず、GirdやStackPanelの様に描画エリアだけが確保された状態になっています。

サンプルプログラムのXAMLのソースコードは次の様になっています。

次にC#のソースコードを見てみましょう。

ソースを読み解く上で、ScottPlotの描画手順の全体像を知っていると理解が深まりますので、もしScottPlotが初めての方は、こちらの記事も是非お読み下さい。

ソースの解説(ポイント)

ソースコードを見て頂くと使い方は分かると思いますので、ポイントだけ解説しておきます。

OxyPlotのグラフ描画で一番簡単なサンプルは次の様になります。

このサンプルは折れ線グラフを描画する場合のものですが、目的に応じたSeriesクラスを使い分けることで、色々なグラフが描画できるようになっています。

縦軸・横軸の設定について

縦軸、横軸はAxisクラスのPositionプロパティで設定します。

例えば、縦軸をグラフの左に、横軸をグラフの下に表示する場合、次の様に指定します。

LinearAxis() は連続した数値を扱う場合のクラスですが、棒グラフでラベルを表示したい場合は、CategoryAxisを使います。

この時、CategoryAxisのItemSourceプロパティにラベルの配列をセットすると、軸にラベルを表示することができます。

例えば、string[] labels という文字列配列に入ったラベルを縦棒グラフの横軸に表示したい場合、次の様に指定します。

補助線についても Axis クラスの MajorGridlineStyle、MinorGridlineStyle で設定します。

OxyPlotでは、デフォルトで縦軸、横軸の補助線を引いてくれませんので、補助線が必要なら次の様に指定して下さい。

積み上げグラフについて

OxyPlotの場合、積み上げグラフ専用のSeries は用意されておらず、縦棒グラフと同じ ColumnSeriesを使います。

ColumnSeriesの場合と異なるのは、IsStacked プロパティに true を設定する部分です。

また、特になにも考慮せずデータを与えていくと、グラフの下から順に積みあがってしまいます。

凡例の表記を、縦棒グラフ(グループ)と合わせようとすると、下から順に積みあがると逆になってしまうので、PlotModelのLegendItemOrderにLegendItemOrder.Reverse を設定すると同時に、積み上げ部分を少し工夫することで、縦棒グラフ(グループ)の凡例に合わせています。

箱ひげ図用の統計情報の計算

OxyPlotで箱ひげ図を描画するには、BoxPlotSeries を生成し、 BoxPlotItem に値をセットする必要があります。

BoxPlotの最初の引数は連番で、1つのグラフに複数の箱ひげ図を描画する際に使用するのですが、今回は1つだけ描画する仕様のため、0をセットしています。

引数の内容と箱ひげ図の対応は以下の通りです。

まとめ

今回はOyxPlotを使って、よく使うチャート(グラフ)が簡単に描画できる関数(メソッド)について解説しました。

OxyPlotは、LiveChartsやScottPlotに比べ、細かな部分までカスタマイズできる印象がありますので、手間さえ掛ければ結構高度なグラフも書けるのではないかと思います。

ただ、公式ドキュメントが整備されていないので、色々なサイトから情報を集める苦労は覚悟しなければなりません。

また、マルチプラットフォームに対応していますので、スマートフォンやタブレット用のグラフ描画も考えるなら、OxyPlotを採用するメリットは高いと思います。

タイトルとURLをコピーしました