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

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

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

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

円グラフの表示例

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

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

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

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

メソッド

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

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

プロパティ一覧

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

プロパティ名	初期値	内容
string[] Labels	null	ピースに表示するラベル
double[] Values	null	ピースの値
string[] Colors	null	ピースの色（ピースの個数分を用意しておくこと）
bool IsExplodedChart	false	true にするとピース間に隙間を開けて表示
bool ShowLabels	true	true にするとピース内にラベルを表示
bool ShowValues	false	true にするとピース内にValuesの値を表示
bool ShowLegen	false	true にすると凡例を表示
bool ShowPercentages	false	true にするとピース内にValuesの値を割合（％）で表示
bool DonutStyle	false	true にすると円ではなくドーナツグラフとして表示
double DonutSize	0.4	ドーナツグラフを表示する際のドーナツの幅（割合）

使い方とサンプルソース

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

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

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

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

 uxPiChart.Clear();
 //uxPiChart.Colors = new string[] { "orange","red","gray","pink","magenta"};
 uxPiChart.ShowLegend = true;
 uxPiChart.IsExplodedChart = true;
 uxPiChart.ShowValues = true;
 uxPiChart.ShowPercentages = true;
 uxPiChart.DonutSize = 0.4;
 uxPiChart.DonutStyle = true;
 uxPiChart.Labels = new string[] { "C#", "Java", "Python", "PHP", "GO" };
 uxPiChart.Values = new double[] { 100, 100, 200, 50, 50 };

 uxPiChart.Draw("ScottPlot 円グラフ");

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

事前準備

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

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

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

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

レイアウトの作成

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

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

XAMLのソースコード

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

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

<UserControl x:Class="WpfPiChartTest.ScottPiChartControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfPiChartTest"
             mc:Ignorable="d" 
             d:DesignHeight="400" d:DesignWidth="400">
    <Grid>
        <WpfPlot x:Name="uxScottPlot"/>
    </Grid>
</UserControl>

C#のソースコード

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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfPiChartTest
{
    /// <summary>
    /// ScottPiChartControl.xaml の相互作用ロジック
    /// </summary>
    public partial class ScottPiChartControl : UserControl
    {
        public string[] Labels { get; set; }                    //ラベルデータの保持
        public double[] Values { get; set; }                    //描画データの保持
        public string[] Colors { get; set; }                    //ピースの色を指定（ピースの個数分を用意しておくこと）
        public bool IsExplodedChart { get; set; } = false;      //それぞれのピースの間にスペースを入れて表示
        public bool ShowLabels { get; set; } = true;            //ピース内にラベルを表示
        public bool ShowValues { get; set; } = false;           //ピース内に値を表示
        public bool ShowLegend { get; set; } = false;           //凡例の表示
        public bool ShowPercentages { get; set; } = false;      //ピース内に値を％で表示
        public bool DonutStyle { get; set; } = false;           //ドーナツの円グラフとして表示
        public double DonutSize { get; set; } = 0.4;            //ドーナツのサイズを指定
        
        //コンストラクタ
        public ScottPiChartControl()
        {
            InitializeComponent();
        }

        /// <summary>
        /// 描画処理
        /// </summary>
        /// <param nam
        public void Draw(string title)
        {
            //描画エリアのクリア
            uxScottPlot.Plot.Clear();
            //グラフタイトルの表示
            uxScottPlot.Plot.Title(title);

            //ピースの色が指定されていた場合、配列に格納
            var colors = (Colors == null) ? null : Colors.Select(i => System.Drawing.Color.FromName(i)).ToArray();

            //円グラフの作成
            var pie = uxScottPlot.Plot.AddPie(Values);
            if(colors != null) pie.SliceFillColors = colors;//色
            pie.ShowLabels = ShowLabels;//ラベルの表示設定
            pie.ShowValues = ShowValues; //値の表示設定
            pie.ShowPercentages = ShowPercentages; //値の割合（％）表示設定;
            pie.Explode = IsExplodedChart;//ピースの間にスペースを入れる
            pie.SliceLabels = Labels;
            //ドーナツのサイズを設定
            if (DonutStyle) pie.DonutSize = DonutSize;
            //凡例の表示設定
            uxScottPlot.Plot.Legend(ShowLegend);
            //グリッド線の表示
            uxScottPlot.Plot.Grid(false);
            //フレーム（外枠）の表示
            uxScottPlot.Plot.Frameless(true);
            //グラフを描画
            uxScottPlot.Render();

        }

        //チャートとデータの消去
        public void Clear()
        {
            uxScottPlot.Plot.Clear();
        }
    }
}

グラフ描画のポイント

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のコードを記述するのは面倒です。

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