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

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

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

画面に張り付けて、データをセットするだけで簡単に円グラフが表示できます。

よく使いそうな機能についてはプロパティで公開していますが、必要に応じて追加して下さい。

目次

円グラフの表示例

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

DonutSyleというプロパティを true にすることで、次のようなドーナツグラフも表示できます。

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

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

メソッド

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

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

プロパティ一覧

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

プロパティ名初期値内容
string[] Labelsnullピースに表示するラベル
double[] Valuesnullピースの値
string[] Colorsnullピースの色(ピースの個数分を用意しておくこと)
bool IsExplodedChartfalsetrue にするとピース間に隙間を開けて表示
bool ShowLabelstruetrue にするとピース内にラベルを表示
bool ShowValuesfalsetrue にするとピース内にValuesの値を表示
bool ShowLegenfalsetrue にすると凡例を表示
bool ShowPercentagesfalsetrue にするとピース内にValuesの値を割合(%)で表示
bool DonutStylefalsetrue にすると円ではなくドーナツグラフとして表示
double DonutSize0.4ドーナツグラフを表示する際のドーナツの幅(割合)

使い方とサンプルソース

使い方のサンプルは次の様になります。

LabelsとValues に値を設定し、 Draw プロパティを呼び出せば円グラフが表示されます。

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

サンプルでは、一通りのプロパティを設定していますが、単純に円グラフを書く場合は省略可能です。

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

事前準備

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

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

ScottPlotのインストールについて詳しい情報を知りたい方は、「 【wpf】いちばんやさしいscottplot-の使い方(windowsform共通) 」の記事をご覧ください。

また、ユーザーコントロールの作り方が知りたい方は、「【WPF】一番やさしいユーザーコントロールの作り方・使い方」の記事をご覧ください。

レイアウトの作成

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

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

XAMLのソースコード

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

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

C#のソースコード

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

グラフ描画のポイント

ScottPlotの場合、 PlotPie メソッドの引数で円グラフのデザインや値の表示/非表示を設定します。

しかし、ドーナツグラフを表示するためには PlotPie のインスタンスに備わっている donutSize プロパティにドーナツの比率を設定しなければなりません。

円グラフには外枠(フレーム)縦横の罫線(グリッド)や軸目盛を表示したくないので、全て非表示(false)にしています。

ScottPlotには様々なプロパティが用意されていますので、例えばグラフタイトルの色やフォントを指定するといった事も可能です。

Visual Studio のインテリセンスを使うことで、どんなプロパティやメソッドが使えるかが分かりますので、自分好みにカスタマイズして頂ければと思います。

それから、ピースの色指定ですが、今回は文字列で色を指定しています。

本来は Color.Red とか Color.Yellow という風にしたいのですが、System.Drawing.Color と System.Window.Media.Color が被ってしまい、ビルドエラーになってしまいます。

これを回避するためには、いちいち System.Drawing.Color.Red という風に記述しなければならず、色指定が面倒になります。

そこで、文字列として色を渡して、ユーザーコントロール内で System.Drawing.Color に変換する処理を行っています。

まとめ

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

毎回円グラフを書くのに、いちいちScottPlotのコードを記述するのは面倒です。

ユーザーコントロールにしておけば、張り付けるだけで簡単にグラフが書けますので、是非ご活用ください。

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

コメント

コメントする

目次