【WPF】C#+ScottPlotで複合グラフのユーザーコントロールを作る!

自作パーツ
この記事は約5分で読めます。

今回はScottPlotを使って、WPFで使える複合グラフ描画用のユーザーコントロールを作ってみました。

複合グラフと言っても、折れ線グラフと棒グラフの組み合わせになりますが、ユーザーコントロールを画面に張り付けて、データをセットするだけで簡単に複合グラフが作成できます。

複合グラフの表示例

このユーザーコントロールを使うと、次のような円グラフが表示できます。

ユーザーコントロールの使い方

では、ユーザーコントロールの使い方について解説していきます。

メソッド

メソッドはシンプルで、次の2つが用意されています。

メソッド名引数の説明内容
void Clear()グラフの消去
void Draw(string title)title:グラフのタイトルグラフの描画

プロパティ一覧

次のプロパティが用意されています。

string[] LabelsnullX軸に表示するラベル
List<string[]> YValuesnullY軸のデータ
string[] Colorsnull棒グラフ、折れ線グラフの色
int BarStyleDataNonullListに登録されたYValuesにおいて、棒グラフとして表示させたいList上の番号
bool ShowValuesfalsetrue にすると棒グラフに値を表示
bool ShowLegendtruetrueにすると凡例を表示
string[] Legendsfalse凡例として表示する各データのタイトル(YValuesに登録した数だけ用意)
string XAxisTitlenullX軸のタイトル
stringYAxisTitlenullY軸のタイトル

使い方とサンプルソース

LabelsにX軸に表示したいラベルを、YValuesにはY軸に表示したいデータを指定し、更に棒グラフとして表示したいデータをBarStyleDataNoプロパティで指定します。

最後に、Draw プロパティを呼び出すことで複合グラフが表示されます。

Drawプロパティにはグラフのタイトルを指定してください。

注意点としては、YValues に折れ線の値を Add メソッドで追加していく仕様なので、最初にClear メソッドを呼んで Listの中身をクリアしておく点です。

でないと、同じ処理を実行する度に前回にAddしたYValuse の内容も合わせて表示され、グラフが線だらけになってしまいます。

ユーザーコントロールの解説

事前準備

今回はフリーのチャートライブラリである ScottPlot を使いますので、NuGetによるインストールが必要です。

NuGetから 「scott」で検索し、 ScottPlot.WPF を選んでインストールして下さい。

ScottPlotのインストールについて詳しい情報を知りたい方は、 こちら の記事をご覧ください。

また、ユーザーコントロールの作り方が知りたい方は、こちらの記事をご覧ください。

レイアウトの作成

今回は、プロジェクト名を WpfLineBarChartTest ユーザーコントロール名を ScottLineBarChartControl で作成しています。

まず、レイアウトエディタでツールボックスに表示されている WpfPlot を張り付けておいて下さい。

XAMLのソースコード

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

ScottPlotチャートコントロールに対して、uxScottPlot という名前を付けています。

C#のソースコード

以下がC#側のソースコードになります。

グラフ描画のポイント

今回は、PlotBar メソッドで棒グラフを、PlotScatterメソッドで折れ線グラフを作成しています。

PlotScatterの引数には、X軸、Y軸のデータや、折れ線の色と太さ、線の種類、凡例に表示するラベル、マーカーの形やサイズなどが指定できますが、今回は一部だけ使いました。

また、マーカーサイズは10、線幅は2、線の種類はLineStyle.Solid に固定しています。

凡例については、ShowLegend プロパティで外部から表示/非表示を設定できるようにしていますが、Legends プロパティに何も設定しなければ、凡例の枠さえ表示されません(ScottPlotの仕様です)。

線の色指定についても、前回の記事「【WPF】ScottPlotで円グラフのユーザーコントロールを作ってみました」と同じ理由(Color.Red などの指定だと、stem.Drawing.Color と System.Window.Media.Color が被るので、いちいち stem.Drawing.Color.Red と記述しないといけなくなる)から、文字列で指定するようになっています。

棒グラフと折れ線グラフを同時に描画する場合、両者における最大値の差が大きいと、棒グラフの最大値がグラフに収まるように自動調整され、結果的に折れ線グラフがはみ出してしまう現象が発生しました。

解決策として、uxScottPlot.plt.AxisAutoY() を使って明示的に縦軸が画面に収まるようにしています。

まとめ

フリーのチャートライブラリ ScottPlot を使って、WPFで使える複合グラフのユーザーコントロールについて、使い方とソースコードを紹介しました。

ScottPlotは様々なグラフを重ねて描画することが可能なようですが、今回は棒グラフと折れ線グラフの2種類を使った複合グラフになっています。

ユーザーコントロールにしておけば、このような複合グラフも張り付けるだけで簡単に使える様になるため、是非ご活用ください。

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