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

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

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

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

後から手を加えやすいよう、必要最小限のプロパティを使っていますので、用途に応じてカスタマイズしてお使いください。

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

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

折れ線グラフ、散布図、円グラフ、棒グラフ、積み上げ、レーダー、箱ひげ、回帰、ヒストグラフ

サンプルプログラム

サンプルプログラムを作りましたので、そのソースコードを元にポイントを解説していきたいと思います。

画面レイアウト

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

描画ボタンをクリックすると、全てのチャートが描画されるようになっています。

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

サンプルプログラムのソースは下記からダウンロードできます。

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

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

グラフ描画はDrowから始まるメソッド名にしました。

チャート(グラフ)名関数(メソッド)名内容
折れ線グラフDrawLine単一の折れ線グラフを描画
折れ線グラフ(複数)DrawLine複数の折れ線グラフを描画
散布図DrawScatt散布図を描画
円グラフDrawPie円グラフを描画
縦棒グラフDrawColumn縦棒グラフを描画
横棒グラフDrawBar横棒グラフを描画
棒グラフ(グルーピング)DrawGroupColumn複数の棒グラフをグルーピングして描画
積み上げグラフDrawStack積み上げグラフを描画
レーダーチャートDrawRadarレーダーチャートを描画
箱ひげ図DrawPopulations箱ひげ図とベルカーブを同時描画
散布図と回帰直線DrawRegression散布図と回帰直線を同時描画
ヒストグラムDrawHistgramヒストグラムを描画

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

例えば、コントロールに “uxChart1” という名前を付けて、xs にX方向のデータ、ysにY方向のデータが格納されていると仮定すると

という具合です。

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

折れ線や棒グラフ、円グラフ、散布図は引数にプロットデータの配列を渡す仕様ですが、複数の折れ線グラフ、レーダーチャート、グルーピングした棒グラフ、積み上げグラフは複数の項目をグルーピングする形になるため、タプルをリスト形式で渡すようにしました。

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

単独の折れ線グラフ、散布図、散布図と回帰直線、箱ひげ図、ヒストグラム

これらはプロットデータを配列データとして、1つまたは2つ引数に渡します。

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

縦棒グラフ、横棒グラフ

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

円グラフ

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

複数の折れ線グラフ

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

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

縦棒グラフ(グルーピング)、積み上げグラフ、レーダーチャート

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

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

ScottPlot をそのまま使う場合、少し面倒な値の渡し方をする必要があるので、項目名と内訳という考え方でプロットデータをセットすれば良いようにしています。

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

ソースコード

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

先ほども申しましたが、タブページが3つあって、それぞれに ScottPlot のコントロールを4つづつ張り付けています。

画像に alt 属性が指定されていません。ファイル名: scottplot_sample05.jpg

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

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

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

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

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

ScottPlotの基本形は簡単で、次の様になります。

関数(メソッド)では、それぞれのグラフ(チャート)を書く上で必要最小限の記述しかしていないので、みなさんが必要と思われる機能(このソースコードで不足している機能)を継ぎ足してご利用下さい。

積み上げグラフについて

この中で一番ややこしいのが積み上げグラフです。

ScottPlotには積み上げグラフ専用メソッドが有りませんので、通常の縦棒グラフを重ねて表現する必要があります。

積み上げグラフの場合、全ての値の合計が一番高い棒になるので、まずそれを作成します。

そこから、順に積み上げる値を引いては棒グラフを描画するという作業を繰り返し、いちばん高い棒グラフから順に小さな棒グラフを重ねています。

まとめ

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

例えばグラフの色を引数に指定するとか、線の太さや種類を指定するなどは、ScottPlotの Plot~メソッドに引数があるので、それを使えば簡単に実現できます。

みなさんが必要な機能を随時継ぎ足して、使いやすい様にカスタマイズしていただければ幸いです。

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