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

常见用例

销售和营销分析

• 可视化从潜在客户到成交的销售流程阶段
• 跟踪营销活动转化率
• 分析客户获取漏斗
• 展示网站访客转化路径

业务流程分析

• 可视化招聘流程（申请人 → 已录用人员）
• 订单履行阶段
• 客户支持工单解决流程
• 产品开发里程碑

电子商务和零售

• 分析购物车放弃情况
• 结账流程完成率
• 从浏览商品到购买的转化情况
• 绘制客户旅程图

金融服务

• 贷款申请流程阶段
• 投资漏斗分析
• 客户入驻进度
• 跟踪账户升级转化率

相关技能

• 实现 Syncfusion WinUI 组件 - 父级库技能
• 其他 WinUI 图表类型（如果库中有）

---

需要帮助？ 请根据要实现的功能，参阅上面的相应参考文件。