FlexChart for WinForms
WinForms 円グラフ
WinForms のチャートタイプ > WinForms 円グラフ

円グラフは、各カテゴリの貢献度を扇形(セグメント)で表示する丸いグラフです。データを可視化する際に最もよく使用されるツールです。従属変数の大きさは、セグメントの中心角に比例します。円グラフは、ゼロでない正の値を持つ単一系列をプロットするために使用します。たとえば、円グラフを使用して、さまざまな自動車会社の市場シェアを表示できます。

WinForms 円グラフ

WinForms 円グラフの作成

FlexChart for WinForms は、FlexPie クラスによって表されるスタンドアロンコントロールによって円グラフを提供します。FlexPie クラスにある FlexPie.DataSource プロパティを使用して、チャートにデータを連結できます。このクラスには、円グラフセグメントの数値とラベルを設定するための FlexPie.Binding および FlexPie.BindingName プロパティも用意されています。また、StartAngle プロパティを設定して、指定した角度から時計回りにセグメントを描画し始めることもできます。FlexChart では、次のバリエーションの円グラフを作成することもできます。

ドーナツグラフ

分割円グラフ

反転円グラフ

WinForms ドーナツ円グラフ WinForms 分割円グラフ WinForms 反転円グラフ

FlexChart を使用して円グラフを作成するには

設計時

  1. FlexPie コントロールをフォームにドラッグアンドドロップします。
  2. フォームで FlexPie コントロールを右クリックして[プロパティ]ウィンドウを開きます。
  3. DataSource プロパティを使用してデータソースを設定します。
  4. Binding および BindingName プロパティを設定します。

コードの使用

WinForms 円グラフをコードで作成するには、FlexPie コントロールを初期化した後に、最初にデフォルトの系列をクリアし、Add メソッドを使用して新しい系列を追加します。DataSource プロパティを使用してデータソースを設定し、BindingName および Binding プロパティを設定します。さらに、ヘッダーコンテンツ、データラベルコンテンツなどの必要なプロパティを使用して、グラフを設定します。

// FlexPieのX軸を「Value」にバインドして、値が横軸に表示されるようにします
flexPie1.Binding = "Value";

flexPie1.BindingName = "Name";

// データ値を表示する内容と方法を指定します
flexPie1.DataLabel.Content = "{name} : {p:0}%";

// 円スライスに対するデータラベルの位置を指定します
flexPie1.DataLabel.Position = PieLabelPosition.Radial;

// FlexPieのヘッダーを設定します
flexPie1.Header.Content = "Market Share of Automobile Companies";

// データをFlexPieに渡します
flexPie1.DataSource = GetCarSales();
' FlexPieのX軸を「Value」にバインドして、値が横軸に表示されるようにします
flexPie1.Binding = "Value"

flexPie1.BindingName = "Name"

' データ値を表示する内容と方法を指定します
flexPie1.DataLabel.Content = "{name} : {p:0}%"

' 円スライスに対するデータラベルの位置を指定します
flexPie1.DataLabel.Position = PieLabelPosition.Radial

' FlexPieのヘッダーを設定します
flexPie1.Header.Content = "Market Share of Automobile Companies"

' データをFlexPieに渡します
flexPie1.DataSource = GetCarSales()

上記のサンプルコードは、GetCarSales という名前のカスタムメソッドを使用してデータを提供しています。要件に基づいてデータソースを設定できます。

/// <summary>
/// FlexPieのデータを作成する方法
/// </summary>
public static List<CategoricalPoint> GetCarSales()
{
    var data = new List<CategoricalPoint>()
    {
        new CategoricalPoint{Name="Maruti", Value=1643467},
        new CategoricalPoint{Name="Hyundai", Value=536241},
        new CategoricalPoint{Name="Mahindra", Value=248859},
        new CategoricalPoint{Name="Tata", Value=210200},
        new CategoricalPoint{Name="Honda", Value=170026},
        new CategoricalPoint{Name="Toyota", Value=140645},
        new CategoricalPoint{Name="Renault", Value=102222},
        new CategoricalPoint{Name="Ford", Value=90061},
    };
    return data;
}
''' <summary>
''' FlexPieのデータを作成する方法
''' </summary>
Public Shared Function GetCarSales() As List(Of CategoricalPoint)
    Dim data As List(Of CategoricalPoint) = New List(Of CategoricalPoint)() From {
        New CategoricalPoint() With {
             .Name = "Maruti",
             .Value = 1643467
        },
        New CategoricalPoint() With {
             .Name = "Hyundai",
             .Value = 536241
        },
        New CategoricalPoint() With {
             .Name = "Mahindra",
             .Value = 248859
        },
        New CategoricalPoint() With {
             .Name = "Tata",
             .Value = 210200
        },
        New CategoricalPoint() With {
             .Name = "Honda",
             .Value = 170026
        },
        New CategoricalPoint() With {
             .Name = "Toyota",
             .Value = 140645
        },
        New CategoricalPoint() With {
             .Name = "Renault",
             .Value = 102222
        },
        New CategoricalPoint() With {
             .Name = "Ford",
             .Value = 90061
        }
    }
    Return data
End Function

複数の円グラフの作成

1 つの円グラフを使用すれば部分と全体の関係が表示できますが、さまざまなグループ間でデータを表示して比較するには、複数の円グラフが必要になります。たとえば、複数の円グラフを使用すると、さまざまな自動車ブランドの四半期ごとの販売数量を比較できます。FlexChart では、FlexPie クラスの Binding プロパティで、データソースから取得したカンマ区切りのフィールド名を設定するだけで、これを実現できます。

複数の WinForms 円グラフ

// FlexPieコントロールをデータソースにバインドします
flexPie1.DataSource = data;
flexPie1.BindingName = "Name";
            
// 複数の円チャートを描画するには、コンマ区切りのフィールド名を指定します
flexPie1.Binding = "Q1,Q2,Q3,Q4";
            
// 円チャートのタイトルを設定します
flexPie1.Titles = new []{ "Quarter1", "Quarter2", "Quarter3", "Quarter4"};

// 円チャートのデータラベルを設定します
flexPie1.DataLabel.Content = "{name}";
flexPie1.DataLabel.Position = C1.Chart.PieLabelPosition.Radial;
' FlexPieコントロールをデータソースにバインドします
flexPie1.DataSource = data
flexPie1.BindingName = "Name"

' 複数の円チャートを描画するには、コンマ区切りのフィールド名を指定します
flexPie1.Binding = "Q1,Q2,Q3,Q4"

' 円チャートのタイトルを設定します
flexPie1.Titles = New String() {"Quarter1", "Quarter2", "Quarter3", "Quarter4"}

' 円チャートのデータラベルを設定します
flexPie1.DataLabel.Content = "{name}"
flexPie1.DataLabel.Position = C1.Chart.PieLabelPosition.Radial