【WPF】ScottPlot 4.1でY2軸に対応した複合グラフのユーザーコントロールを作る!

プログラミングTips
この記事は約5分で読めます。

ScottPlotが Ver4.1 になって、グラフの左右にY軸(つまりY軸が2個)が表示できるようになりました。

今回は、以前公開した「【WPF】C#+ScottPlotで複合グラフのユーザーコントロールを作る!」のソースコードを ScottPlot 4.1 に対応させ、ついでにY2軸が使えるように修正しましたので、紹介したいと思います。

複合グラフの表示例

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

赤い線がY2軸のスケール(0~2250)で表示され、それ以外はY1軸のスケール(0~200)で表示されています。

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

では、ユーザーコントロールの使い方は、各グラフ(折線、棒)ごとに左右どちらのY軸を使うかが指定できるようになった以外は前回の記事と全く同じです。

メソッド

メソッドは下記の2つのみです。

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

プロパティ一覧

プロパティは以下の通りです。

前回との違いは、Yの1,2軸を指定するための YAxisNo と、Y2軸のタイトルを設定する YAxis2Title が追加されています。

string[] LabelsnullX軸に表示するラベル
List<string[]> YValuesnullY軸のデータ
string[] Colorsnull棒グラフ、折れ線グラフの色
int BarStyleDataNonullListに登録されたYValuesにおいて、棒グラフとして表示させたいList上の番号
bool ShowValuesfalsetrue にすると棒グラフに値を表示
bool ShowLegendtruetrueにすると凡例を表示
string[] Legendsfalse凡例として表示する各データのタイトル(YValuesに登録した数だけ用意)
string XAxisTitlenullX軸のタイトル
string YAxisTitlenullY軸のタイトル
int[] YAxisNonullY軸の指定
YValuesの登録順に0か1を配列で指定(0:左のY軸、1:右のY軸)
例えば、3個のグラフを描画する際、1つ目のY2軸に表示するには
new int[]{1,0,0} 

使い方とサンプルソース

呼び出し手順は次の通りです。

  1. LabelsにX軸に表示したいラベルを登録、YValuesにはY軸に表示したいデータを指定します。
  2. Y軸に表示したいデータの中で、棒グラフとして描画したいものについて、その番号をBarStyleDataNoプロパティに指定します。
  3. Y軸に表示したいデータの中で、Y1軸(左)に表示したいものは、0を、Y2軸(右)に表示したいものは1 を YAxisNo に指定します。
  4. 最後に、Draw プロパティを呼び出せば、複合グラフが表示されます。

Drawプロパティにはグラフのタイトルを指定します。

尚、YValues に折れ線の値を Add メソッドで追加していく仕様なので、最初にClear メソッドを呼んで Listの中身をクリアしていて下さい。

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

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

事前準備

あらかじめ NuGet を使って、 ScottPlot.WPF をインストールしておいてください。

ScottPlotのインストールについて分からない方は、 こちら の記事を参照ください。

ユーザーコントロールの作り方については、こちらの記事をご参照ださい。

レイアウトの作成

【WPF】C#+ScottPlotで複合グラフのユーザーコントロールを作る」と全く同じです。

というか、前回のソースを修正しただけなので、プロジェクト名は WpfLineBarChartTest ユーザーコントロール名は ScottLineBarChartControl になっています。

ちなみに、ユーザーコントロールにScottPlotを張り付けると、下記の様になります。

XAMLのソースコード

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

単に最新版のScottPlot を張り付け直しただけなので手を加えていません。

前回と全く同じです。

C#のソースコード

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

今回は「【WPF】C#+ScottPlotで複合グラフのユーザーコントロールを作る!」のソースコード をScottPlot 4.1で動くように修正しているだけなので、詳細については上記の記事をご覧ください。

また、旧バージョンから移行を考えている方は、下記の記事に詳細を載せていますのでご一読ください。

まとめ

フリーのチャートライブラリ ScottPlot が 2021年7月に 大幅なバージョンアップが行われ、Y2軸対応になりました。

今回は、以前公開した「複合グラフのユーザーコントロール」をScottPlotに対応させ、更にY2軸が使えるように修正致しました。

とはいえ、このユーザーコントロールはシンプルな構成であり、皆さんが実際に使うには機能が不足していると思います。

あくまでも参考情報としての位置づけですが、皆様のプログラミングの一助になれば幸いです。

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