FlexChart for WPF
ファンネル
FlexChart > FlexChart の理解 > FlexChart タイプ > ファンネル

ファンネルグラフを使用すると、1 次元プロセスの連続的な段階を表現できます。たとえば、販売見込み客、有望見込み客、売買交渉、成約などの売買プロセスの段階を通して見込み客を追跡するとします。

このプロセスの各段階で、全体に対する割合（パーセンテージ）を表します。そのため、チャートは、最初に最大の段階があり、段階が進むごとに小さくなる漏斗の形状になります。

ファンネルグラフは、どの段階にどの程度の割合で値が減少しているかが顕著にわかる場所として、プロセス内に潜在的な問題がある領域を特定します。

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

次の図は、受注処理評価プロセスの 7 つの段階の注文数を示す台形グラフと積層横棒グラフを示します。

台形グラフ
積層横棒グラフ

FlexChart の ChartType プロパティを ChartType 列挙の Funnel に設定して、ファンネルグラフを使用します。FunnelType プロパティを FunnelChartType 列挙の Default または Rectangle に設定して、ファンネルグラフのタイプを台形グラフと積層横棒グラフのいずれかに指定します。

さらに、台形グラフに設定されている場合は、FunnelNeckWidth および FunnelNeckHeight プロパティを設定して、ファンネルグラフのネックのサイズを変更します。これらのプロパティは、FlexChart クラスの Options プロパティからアクセスできる ChartOptions クラスにあります。

次のコードは、受注処理の7つの段階にわたる受注金額の値を含むデータを作成するクラスDataCreatorを作成します。

Class DataCreator
    Public Shared Function CreateFunnelData() As List(Of DataItem)
        Dim data = New List(Of DataItem)()
        data.Add(New DataItem("受け取り済み", 99000))
        data.Add(New DataItem("処理済み", 85000))
        data.Add(New DataItem("検定済み", 60000))
        data.Add(New DataItem("解放済み", 50000))
        data.Add(New DataItem("発送済み", 45000))
        data.Add(New DataItem("完了済み", 30000))
        data.Add(New DataItem("配達済み", 25000))
        Return data
    End Function
End Class

Public Class DataItem
    Public Sub New(order__1 As String, value__2 As Integer)
        Order = order__1
        Value = value__2
    End Sub

    Public Property Order() As String
        Get
            Return m_Order
        End Get
        Set
            m_Order = Value
        End Set
    End Property
    Private m_Order As String
    Public Property Value() As Integer
        Get
            Return m_Value
        End Get
        Set
            m_Value = Value
        End Set
    End Property
    Private m_Value As Integer
End Class

class DataCreator
{
    public static List<DataItem> CreateFunnelData()
    {
        var data = new List<DataItem>();
        data.Add(new DataItem("受け取り済み", 99000));
        data.Add(new DataItem("処理済み", 85000));
        data.Add(new DataItem("検定済み", 60000));
        data.Add(new DataItem("解放済み", 50000));
        data.Add(new DataItem("発送済み", 45000));
        data.Add(new DataItem("完了済み", 30000));
        data.Add(new DataItem("配達済み", 25000));
        return data;
    }
}

public class DataItem
{
    public DataItem(string order, int value)
    {
        Order = order;
        Value = value;
    }

    public string Order { get; set; }
    public int Value { get; set; }
}

次のスニペットは、チャートタイプを Funnel に設定し、ファンネルのネックのサイズを指定し、チャートのヘッダー、凡例、データラベルを設定します。

    <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:FunnelChart"
        xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" 
        x:Class="FunnelChart.MainWindow"
        mc:Ignorable="d"
        DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
        Title="MainWindow" Height="705.284" Width="905.322">
    <Grid Margin="0,0,0,-117">

        <c1:C1FlexChart x:Name="flexChart" 
                        BindingX ="Order" 
                        ChartType="Funnel"  
                        ItemsSource="{Binding Data}" 
                        HorizontalAlignment="Left" 
                        Height="471" 
                        Margin="6,169,0,0" 
                        VerticalAlignment="Top" 
                        Width="792" 
                        Header="昨年の注文履行評価" 
                        HeaderAlignment="Center" 
                        LegendPosition="Bottom">
            <c1:C1FlexChart.HeaderStyle>
                <c1:ChartStyle FontFamily="Arial" 
                               FontSize="13" 
                               FontWeight="Bold" 
                               Stroke="DarkCyan"/>
            </c1:C1FlexChart.HeaderStyle>
            <c1:Series Binding="Value">
            </c1:Series>
            <c1:C1FlexChart.DataLabel>
                <c1:DataLabel Content="{}{Order}: {y}" 
                              Position="Center"/>
            </c1:C1FlexChart.DataLabel>
            <c1:C1FlexChart.Options>
                <c1:ChartOptions FunnelType="Default" 
                                 FunnelNeckHeight="0.05" 
                                 FunnelNeckWidth="0.2"/>
            </c1:C1FlexChart.Options>
        </c1:C1FlexChart>
    </Grid>
</Window>
MainWindow.xaml.vb
コードのコピー 
Partial Public Class MainWindow
    Inherits Window
    Private _data As List(Of DataItem)

    Public Sub New()
        InitializeComponent()
    End Sub

    Public ReadOnly Property Data() As List(Of DataItem)
        Get
            If _data Is Nothing Then
                _data = DataCreator.CreateFunnelData()
            End If

            Return _data
        End Get
    End Property
End Class

MainWindow.xaml.cs
コードのコピー 
public partial class MainWindow : Window
{
    private List<DataItem> _data;

    public MainWindow()
    {
        InitializeComponent();
    }

    public List<DataItem> Data
    {
        get
        {
            if (_data == null)
            {
                _data = DataCreator.CreateFunnelData();
            }

            return _data;
        }
    }
}

 

 

Copyright © MESCIUS, Inc. All rights reserved.