syncfusion-winui-funnel-chart

Syncfusion WinUI ファネルチャートの実装

Syncfusion WinUI ファネルチャート（SfFunnelChart）は、プロセスの各段階を経るごとにデータが段階的に減少する様子を表現する、特化型のデータ可視化コントロールです。コンバージョン率、営業パイプライン、採用プロセス、および連続する段階を含むあらゆるワークフローの分析に最適です。

このスキルを使用する場面

ユーザーが次のことを必要としている場合に、このスキルを使用してください。

• コンバージョンファネルを可視化する - 営業パイプライン、マーケティングキャンペーン、ユーザー獲得フロー
• プロセスの段階を分析する - 採用パイプライン、注文処理、申請ワークフロー
• 階層データを表示する - 段階が進むごとに自然に減少するデータ
• 段階ごとの指標を作成する - 連続するフェーズにわたるパフォーマンスの追跡
• インタラクティブなデータ探索を実装する - ツールチップ、選択、セグメントの分離表示を使用
• 視覚的な外観をカスタマイズする - パレット、グラデーション、ラベル、凡例、スタイル

コンポーネントの概要

SfFunnelChart は Syncfusion.Chart.WinUI NuGet パッケージの一部であり、次の機能を提供します。

• ItemsSource、XBindingPath、YBindingPath を使用したデータバインディング
• タイトル、凡例、データラベル、外観設定による視覚的なカスタマイズ
• ツールチップ、選択、セグメントの分離表示などのインタラクティブ機能
• 複数のモードとレイアウトオプションを備えた柔軟な描画
• パレット、グラデーション、カスタムテンプレートを使用した豊富なスタイル設定

ドキュメントとナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

次のことが必要な場合に、このリファレンスを使用してください。

• Syncfusion.Chart.WinUI NuGet パッケージをインストールする
• XAML または C# で基本的なチャート構造を設定する
• 名前空間のインポート（Syncfusion.UI.Xaml.Charts）を構成する
• データを含む ViewModel を作成してバインドする
• データマッピング用に XBindingPath と YBindingPath を設定する
• 基本的な設定で最初のファネルチャートを表示する

タイトルのカスタマイズ

📄 参照: references/title-customization.md

次のことが必要な場合に、このリファレンスを使用してください。

• Header プロパティを使用してチャートにタイトルを追加する
• カスタムテンプレートでタイトルの外観をカスタマイズする
• タイトルを配置する（左、中央、右）
• 枠線、色、フォントを使ってタイトル要素をスタイル設定する
• 複雑なタイトルレイアウトを作成する

凡例の構成

📄 参照: references/legend.md

次のことが必要な場合に、このリファレンスを使用してください。

• チャートの凡例を有効にして構成する
• 凡例のタイトルまたはヘッダーを追加する
• 凡例アイコン（サイズ、表示設定）をカスタマイズする
• 凡例項目の間隔とレイアウトを制御する
• セグメントの表示を切り替えるチェックボックスを追加する
• 凡例を配置する（上、下、左、右）
• 凡例の背景と枠線をスタイル設定する
• カスタムの凡例項目テンプレートを作成する

データラベル

📄 参照: references/data-labels.md

次のことが必要な場合に、このリファレンスを使用してください。

• ShowDataLabels でデータラベルを有効にする
• ラベルのコンテキスト（YValue、Percentage、XValue）を構成する
• ラベルの外観（色、フォント、枠線）をカスタマイズする
• カスタムパターンでラベルの値をフォーマットする
• 見やすい配置のためにラベルを回転する
• カスタムのラベルテンプレートを作成する

ツールチップ

📄 参照: references/tooltip.md

次のことが必要な場合に、このリファレンスを使用してください。

• EnableTooltip でツールチップを有効にする
• カスタマイズ用に ChartTooltipBehavior を構成する
• ツールチップの背景と枠線をスタイル設定する
• ツールチップのラベルテキストのスタイルをカスタマイズする
• 配置とオフセットのプロパティでツールチップの位置を調整する
• ツールチップのタイミング（表示時間、遅延、アニメーション）を制御する
• カスタムのツールチップテンプレートを作成する

選択

📄 参照： references/selection.md

次の操作が必要な場合は、このリファレンスを使用してください。

• DataPointSelectionBehavior を使用してセグメントの選択を有効にする
• 選択タイプ（Single、SingleDeselect、Multiple、None）を設定する
• SelectionBrush を使用して選択時の外観をカスタマイズする
• SelectedIndex または SelectedIndexes を使用してセグメントをプログラムから選択する
• 選択イベント（SelectionChanging、SelectionChanged）を処理する
• カスタムの選択ロジックを実装する

セグメントの切り離し

📄 参照： references/exploding-segments.md

次の操作が必要な場合は、このリファレンスを使用してください。

• 特定のセグメントを切り離して強調する
• 初期状態で切り離すセグメントを ExplodeIndex で設定する
• ExplodeOffset を設定して切り離す距離を調整する
• ExplodeOnTap を有効にして、タップで切り離せるようにする
• 重要なデータポイントを視覚的に強調する

外観とスタイル設定

📄 参照： references/appearance-styling.md

次の操作が必要な場合は、このリファレンスを使用してください。

• 定義済みのパレットブラシを適用する
• カスタムカラーパレットを作成する
• セグメントに線形グラデーションを適用する
• セグメントに放射状グラデーションを適用する
• グラデーションの停止位置と色を設定する
• 統一感のある配色をデザインする

高度な機能

📄 参照： references/advanced-features.md

次の操作が必要な場合は、このリファレンスを使用してください。

• GapRatio を使用してセグメント間に間隔を設ける
• MinimumWidth を使用して首の幅をカスタマイズする
• 逆ピラミッドを作成する
• 描画モード（ValueIsHeight と ValueIsWidth）を設定する
• チャートのパフォーマンスを最適化する
• エッジケースや複雑なシナリオに対応する

クイックスタートの例

凡例とデータラベルを含むファネルチャートを作成する最小限の例を示します。

XAML の実装

<Window
    x:Class="FunnelChartDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:chart="using:Syncfusion.UI.Xaml.Charts"
    xmlns:model="using:FunnelChartDemo.ViewModel">

    <chart:SfFunnelChart x:Name="chart"
                         Header="SALES PIPELINE"
                         EnableTooltip="True"
                         ShowDataLabels="True"
                         Height="400" Width="600"
                         ItemsSource="{Binding Data}"
                         XBindingPath="Stage"
                         YBindingPath="Value">
        
        <chart:SfFunnelChart.DataContext>
            <model:ChartViewModel />
        </chart:SfFunnelChart.DataContext>
        
        <chart:SfFunnelChart.Legend>
            <chart:ChartLegend />
        </chart:SfFunnelChart.Legend>
    </chart:SfFunnelChart>
</Window>

C# の実装

using Syncfusion.UI.Xaml.Charts;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
        
        SfFunnelChart chart = new SfFunnelChart();
        ChartViewModel viewModel = new ChartViewModel();
        chart.DataContext = viewModel;
        
        chart.SetBinding(
            SfFunnelChart.ItemsSourceProperty,
            new Binding() { Path = new PropertyPath("Data") });
        
        chart.XBindingPath = "Stage";
        chart.YBindingPath = "Value";
        chart.Header = "SALES PIPELINE";
        chart.Height = 400;
        chart.Width = 600;
        chart.Legend = new ChartLegend();
        chart.EnableTooltip = true;
        chart.ShowDataLabels = true;
        
        this.Content = chart;
    }
}

ViewModel

public class Model
{
    public string Stage { get; set; }
    public double Value { get; set; }
}

public class ChartViewModel
{
    public List<Model> Data { get; set; }
    
    public ChartViewModel()
    {
        Data = new List<Model>()
        {
            new Model() { Stage = "Leads", Value = 1000 },
            new Model() { Stage = "Qualified", Value = 750 },
            new Model() { Stage = "Proposal", Value = 500 },
            new Model() { Stage = "Negotiation", Value = 300 },
            new Model() { Stage = "Closed Won", Value = 150 }
        };
    }
}

よく使われるパターン

パターン 1：カスタムカラーを使用したセールスファネル

<Grid>
    <Grid.Resources>
        <BrushCollection x:Key="salesColors">
            <SolidColorBrush Color="#4dd0e1"/>
            <SolidColorBrush Color="#26c6da"/>
            <SolidColorBrush Color="#00bcd4"/>
            <SolidColorBrush Color="#0097a7"/>
            <SolidColorBrush Color="#00838f"/>
        </BrushCollection>
    </Grid.Resources>
    
    <chart:SfFunnelChart ItemsSource="{Binding Data}"
                         XBindingPath="Stage"
                         YBindingPath="Value"
                         PaletteBrushes="{StaticResource salesColors}"
                         ShowDataLabels="True">
        <chart:SfFunnelChart.DataLabelSettings>
            <chart:FunnelDataLabelSettings Context="Percentage" 
                                          Foreground="White" />
        </chart:SfFunnelChart.DataLabelSettings>
    </chart:SfFunnelChart>
</Grid>

パターン 2：選択機能付きのインタラクティブなファネル

<chart:SfFunnelChart ItemsSource="{Binding Data}"
                     XBindingPath="Stage"
                     YBindingPath="Value"
                     EnableTooltip="True">
    
    <chart:SfFunnelChart.SelectionBehavior>
        <chart:DataPointSelectionBehavior SelectionBrush="Orange"
                                         Type="Single"/>
    </chart:SfFunnelChart.SelectionBehavior>
    
    <chart:SfFunnelChart.TooltipBehavior>
        <chart:ChartTooltipBehavior />
    </chart:SfFunnelChart.TooltipBehavior>
</chart:SfFunnelChart>

パターン 3：切り離したセグメントの強調

<chart:SfFunnelChart ItemsSource="{Binding Data}"
                     XBindingPath="Stage"
                     YBindingPath="Value"
                     ExplodeIndex="2"
                     ExplodeOffset="40"
                     ExplodeOnTap="True"
                     GapRatio="0.1">
</chart:SfFunnelChart>

主要なプロパティのリファレンス

基本プロパティ

• ItemsSource - チャートのデータソース
• XBindingPath - セグメントラベル（ステージ名）のプロパティパス
• YBindingPath - セグメント値のプロパティパス
• Header - チャートのタイトル（文字列または UIElement）
• Legend - セグメント情報を表示する ChartLegend インスタンス

視覚プロパティ

• ShowDataLabels - データラベルの有効／無効を切り替える（bool）
• EnableTooltip - ツールチップの有効／無効を切り替える（bool）
• PaletteBrushes - カスタムカラーパレット（BrushCollection）
• GapRatio - セグメント間の間隔（0.0～1.0）
• MinimumWidth - 下部の首の幅（double）

描画プロパティ

• Mode - 描画モード：ValueIsHeight または ValueIsWidth
• Height / Width - チャートのサイズ

インタラクションプロパティ

• SelectionBehavior - セグメントの選択を設定する
• ExplodeIndex - 切り離すセグメントのインデックス
• ExplodeOffset - セグメントを切り離す距離
• ExplodeOnTap - タップによる切り離しを有効にする

設定オブジェクト

• DataLabelSettings - ラベルをカスタマイズする FunnelDataLabelSettings
• TooltipBehavior - ツールチップをカスタマイズする ChartTooltipBehavior

よくあるユースケース

セールスおよびマーケティング分析

• リードから成約までの営業パイプラインのステージを可視化する
• マーケティングキャンペーンのコンバージョン率を追跡する
• 顧客獲得ファネルを分析する
• Web サイト訪問者のコンバージョン経路を表示する

ビジネスプロセス分析

• 採用パイプラインを可視化する（応募者 → 採用）
• 注文処理の各ステージを表示する
• カスタマーサポートチケットの解決フローを表示する
• 製品開発のマイルストーンを表示する

Eコマースと小売

• ショッピングカートの放棄を分析する
• チェックアウトプロセスの完了率を分析する
• 商品の閲覧から購入までのコンバージョンを分析する
• カスタマージャーニーをマッピングする

金融サービス

• ローン申請プロセスの各ステージを表示する
• 投資ファネルを分析する
• 顧客のオンボーディング状況を表示する
• アカウントのアップグレードにおけるコンバージョンを追跡する

関連スキル

• Syncfusion WinUI コンポーネントの実装 - 親ライブラリのスキル
• その他の WinUI チャートタイプ（ライブラリで利用可能な場合）

---

お困りですか？ 実装したい機能に応じて、上記の該当するリファレンスファイルを参照してください。