ファンネルグラフは、受注処理などの直線的プロセスの連続的な段階を視覚化する際に役立つチャートです。このようなプロセスの各段階で、全体に対する割合（パーセンテージ）を表します。そのため、チャートは、最初に最大の段階があり、段階が進むごとに小さくなる漏斗の形状になります。ファンネルグラフは、どの段階にどの程度の割合で値が減少しているかが顕著にわかる場所として、プロセス内に潜在的な問題がある領域を特定します。たとえば、受注処理プロセスは、受注、処理、承認、リリース、出荷、完了、最終配送などの各段階を通して注文数を追跡します。

FlexChart には、2 つの形式のファンネルグラフが用意されています。

台形グラフ： 1 つの台形を水平に分割したような形式で、関連する値を次々と積み上げて配置します。
積層横棒グラフ：水平の棒の形式で、関連する値を次々と積み上げて配置します。

台形ファンネルグラフ	積層横棒ファンネルグラフ

WinForms ファンネルグラフの作成

FlexChart を使用して WinForms ファンネルグラフを作成できます。それには、FlexChart クラスの ChartType プロパティを Funnel に設定します。このプロパティは、C1.Chart 名前空間の ChartType 列挙に含まれる値を受け取ります。台形または積層横棒タイプのファンネルグラフを作成するには、FunnelType プロパティを Default または Rectangle に設定します。

台形ファンネルグラフには、ネックの幅と高さを設定するオプションも提供されます。これらのプロパティは、FlexChart クラスの Options プロパティからアクセスできる ChartOptions クラスにあります。

C#
VB.NET

this.flexChart1.Series.Clear();

// FlexChartのヘッダーを設定します
this.flexChart1.Header.Content = "Recruitment Funnel";

this.flexChart1.Binding = "Value";

// FlexChartのX軸を「名前」にバインドします
this.flexChart1.BindingX = "Name";

// データラベルの内容を設定します
this.flexChart1.DataLabel.Content = "{value}";

// データ値の位置を設定します
this.flexChart1.DataLabel.Position = LabelPosition.Center;

// FlexChartに系列を作成して追加します
Series series = new Series() { Binding = "Value" };
this.flexChart1.Series.Add(series);

// データをFlexChartに渡します
this.flexChart1.DataSource = GetRecruitmentData();

// FlexChartタイプをファンネルに設定します
this.flexChart1.ChartType = ChartType.Funnel;

Me.flexChart1.Series.Clear()

' FlexChartのヘッダーを設定します
Me.flexChart1.Header.Content = "Recruitment Funnel"

Me.flexChart1.Binding = "Value"

' FlexChartのX軸を「名前」にバインドします
Me.flexChart1.BindingX = "Name"

' データラベルの内容を設定します
Me.flexChart1.DataLabel.Content = "{value}"

' データ値の位置を設定します
Me.flexChart1.DataLabel.Position = LabelPosition.Center

' FlexChartに系列を作成して追加します
Dim series As New Series() With {
     .Binding = "Value"
}
Me.flexChart1.Series.Add(series)

' データをFlexChartに渡します
Me.flexChart1.DataSource = GetRecruitmentData()

' FlexChartタイプをファンネルに設定します
Me.flexChart1.ChartType = ChartType.Funnel

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

C#
VB.NET

/// <summary>
/// FlexChartのデータを作成するメソッド
/// </summary>
public static IList<CategoricalPoint> GetRecruitmentData()
{
    var data = new List<CategoricalPoint>();

    data.Add(new CategoricalPoint { Name = "Candidates Applied", Value = 250 });
    data.Add(new CategoricalPoint { Name = "Initial Validation", Value = 145 });
    data.Add(new CategoricalPoint { Name = "Screening", Value = 105 });
    data.Add(new CategoricalPoint { Name = "Telephonic Interview", Value = 85 });
    data.Add(new CategoricalPoint { Name = "Personal Interview", Value = 48 });
    data.Add(new CategoricalPoint { Name = "Hired", Value = 18 });
    return data;
}

Me.flexChart1.Series.Clear()

' FlexChartのヘッダーを設定します
Me.flexChart1.Header.Content = "Recruitment Funnel"

Me.flexChart1.Binding = "Value"

' FlexChartのX軸を「名前」にバインドします
Me.flexChart1.BindingX = "Name"

' データラベルの内容を設定します
Me.flexChart1.DataLabel.Content = "{value}"

' データ値の位置を設定します
Me.flexChart1.DataLabel.Position = LabelPosition.Center

' FlexChartに系列を作成して追加します
Dim series As New Series() With {
     .Binding = "Value"
}
Me.flexChart1.Series.Add(series)

' データをFlexChartに渡します
Me.flexChart1.DataSource = GetRecruitmentData()

' FlexChartタイプをファンネルに設定します
Me.flexChart1.ChartType = ChartType.Funnel