syncfusion-winui-funnel-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion WinUI Funnel Charts

实现Syncfusion WinUI漏斗图

The Syncfusion WinUI Funnel Chart (

SfFunnelChart

) is a specialized data visualization control for representing data that progressively decreases across stages in a process. It's ideal for analyzing conversion rates, sales pipelines, recruitment processes, and any workflow with sequential stages.

Syncfusion WinUI漏斗图（

SfFunnelChart

）是一款专用的数据可视化控件，用于表示流程各阶段中逐步递减的数据。它非常适合分析转化率、销售管道、招聘流程以及任何包含连续阶段的工作流。

When to Use This Skill

何时使用本技能

Use this skill when the user needs to:

Visualize conversion funnels - Sales pipelines, marketing campaigns, user acquisition flows
Analyze process stages - Recruitment pipelines, order fulfillment, application workflows
Display hierarchical data - Data that naturally decreases from stage to stage
Create stage-based metrics - Performance tracking across sequential phases
Implement interactive data exploration - With tooltips, selection, and segment explosion
Customize visual appearance - Palettes, gradients, labels, legends, and styling

当用户需要完成以下需求时使用本技能：

转化漏斗可视化 - 销售管道、营销活动、用户获取流程
流程阶段分析 - 招聘管道、订单履约、应用工作流
层级数据展示 - 各阶段数值自然递减的数据
创建基于阶段的指标 - 跨连续阶段的性能追踪
实现交互式数据探索 - 支持提示框、选中、区块突出分离效果
自定义视觉外观 - 配色、渐变、标签、图例和样式设置

Component Overview

组件概述

The

SfFunnelChart

is part of the

Syncfusion.Chart.WinUI

NuGet package and provides:

Data binding with
```
ItemsSource
```
,
```
XBindingPath
```
, and
```
YBindingPath
```
Visual customization through titles, legends, data labels, and appearance settings
Interactive features including tooltips, selection, and exploding segments
Flexible rendering with multiple modes and layout options
Rich styling using palettes, gradients, and custom templates

SfFunnelChart

属于

Syncfusion.Chart.WinUI

NuGet包，提供以下能力：

通过
```
ItemsSource
```
、
```
XBindingPath
```
和
```
YBindingPath
```
实现数据绑定
支持标题、图例、数据标签和外观设置的视觉自定义能力
包含提示框、选中、区块突出分离的交互功能
支持多种模式和布局选项的灵活渲染能力
支持配色、渐变和自定义模板的丰富样式能力

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Use this reference when you need to:

Install the Syncfusion.Chart.WinUI NuGet package
Set up basic chart structure with XAML or C#
Configure namespace imports (
```
Syncfusion.UI.Xaml.Charts
```
)
Create and bind a ViewModel with data
Set
```
XBindingPath
```
and
```
YBindingPath
```
for data mapping
Display your first funnel chart with basic configuration

📄 阅读： references/getting-started.md

当你需要完成以下操作时使用本参考：

安装Syncfusion.Chart.WinUI NuGet包
用XAML或C#搭建基础图表结构
配置命名空间导入（
```
Syncfusion.UI.Xaml.Charts
```
）
创建并绑定携带数据的ViewModel
设置
```
XBindingPath
```
和
```
YBindingPath
```
完成数据映射
完成基础配置展示你的第一个漏斗图

Title Customization

标题自定义

📄 Read: references/title-customization.md

Use this reference when you need to:

Add a title to the chart using the
```
Header
```
property
Customize title appearance with custom templates
Align the title (left, center, right)
Style title elements with borders, colors, and fonts
Create complex title layouts

📄 阅读： references/title-customization.md

当你需要完成以下操作时使用本参考：

用
```
Header
```
属性为图表添加标题
通过自定义模板自定义标题外观
调整标题对齐方式（左、中、右）
为标题元素设置边框、颜色、字体样式
实现复杂的标题布局

Legend Configuration

图例配置

📄 Read: references/legend.md

Use this reference when you need to:

Enable and configure the chart legend
Add a legend title or header
Customize legend icons (size, visibility)
Control legend item spacing and layout
Add checkboxes for toggling segment visibility
Position the legend (top, bottom, left, right)
Style the legend background and borders
Create custom legend item templates

📄 阅读： references/legend.md

当你需要完成以下操作时使用本参考：

启用并配置图表图例
添加图例标题或头部
自定义图例图标（大小、可见性）
控制图例项间距和布局
添加复选框用于切换区块可见性
设置图例位置（上、下、左、右）
自定义图例背景和边框样式
创建自定义图例项模板

Data Labels

数据标签

📄 Read: references/data-labels.md

Use this reference when you need to:

Enable data labels with
```
ShowDataLabels
```
Configure label context (YValue, Percentage, XValue)
Customize label appearance (colors, fonts, borders)
Format label values with custom patterns
Rotate labels for better positioning
Create custom label templates

📄 阅读： references/data-labels.md

当你需要完成以下操作时使用本参考：

用
```
ShowDataLabels
```
启用数据标签
配置标签内容（Y值、百分比、X值）
自定义标签外观（颜色、字体、边框）
用自定义格式规则格式化标签数值
旋转标签优化展示位置
创建自定义标签模板

Tooltips

提示框

📄 Read: references/tooltip.md

Use this reference when you need to:

Enable tooltips with
```
EnableTooltip
```
Configure
```
ChartTooltipBehavior
```
for customization
Style tooltip background and borders
Customize tooltip label text styles
Position tooltips with alignment and offset properties
Control tooltip timing (duration, delay, animation)
Create custom tooltip templates

📄 阅读： references/tooltip.md

当你需要完成以下操作时使用本参考：

用
```
EnableTooltip
```
启用提示框
配置
```
ChartTooltipBehavior
```
实现自定义
设置提示框背景和边框样式
自定义提示框标签文本样式
通过对齐和偏移属性调整提示框位置
控制提示框触发时序（时长、延迟、动画）
创建自定义提示框模板

Selection

选中功能

📄 Read: references/selection.md

Use this reference when you need to:

Enable segment selection with
```
DataPointSelectionBehavior
```
Configure selection types (Single, SingleDeselect, Multiple, None)
Customize selection appearance with
```
SelectionBrush
```
Programmatically select segments using
```
SelectedIndex
```
or
```
SelectedIndexes
```
Handle selection events (
```
SelectionChanging
```
,
```
SelectionChanged
```
)
Implement custom selection logic

📄 阅读： references/selection.md

当你需要完成以下操作时使用本参考：

用
```
DataPointSelectionBehavior
```
启用区块选中功能
配置选中类型（单选、单选可取消、多选、禁用）
用
```
SelectionBrush
```
自定义选中状态外观
通过
```
SelectedIndex
```
或
```
SelectedIndexes
```
编程选中区块
处理选中事件（
```
SelectionChanging
```
、
```
SelectionChanged
```
）
实现自定义选中逻辑

Exploding Segments

区块突出分离

📄 Read: references/exploding-segments.md

Use this reference when you need to:

Explode specific segments to draw attention
Configure
```
ExplodeIndex
```
for initial explosion
Set
```
ExplodeOffset
```
to control explosion distance
Enable
```
ExplodeOnTap
```
for interactive explosion
Highlight important data points visually

📄 阅读： references/exploding-segments.md

当你需要完成以下操作时使用本参考：

将特定区块突出分离以吸引注意力
配置
```
ExplodeIndex
```
设置初始突出的区块
设置
```
ExplodeOffset
```
控制突出分离的距离
启用
```
ExplodeOnTap
```
实现点击交互突出效果
视觉上高亮重要数据点

Appearance and Styling

外观与样式

📄 Read: references/appearance-styling.md

Use this reference when you need to:

Apply predefined palette brushes
Create custom color palettes
Apply linear gradients to segments
Apply radial gradients to segments
Configure gradient stops and colors
Design cohesive color schemes

📄 阅读： references/appearance-styling.md

当你需要完成以下操作时使用本参考：

应用预设配色画笔
创建自定义配色方案
为区块应用线性渐变
为区块应用径向渐变
配置渐变节点和颜色
设计统一协调的配色体系

Advanced Features

高级功能

📄 Read: references/advanced-features.md

Use this reference when you need to:

Add spacing between segments using
```
GapRatio
```
Customize the neck width with
```
MinimumWidth
```
Create inverted pyramids
Configure rendering mode (
```
ValueIsHeight
```
vs
```
ValueIsWidth
```
)
Optimize chart performance
Handle edge cases and complex scenarios

📄 阅读： references/advanced-features.md

当你需要完成以下操作时使用本参考：

用
```
GapRatio
```
添加区块之间的间距
用
```
MinimumWidth
```
自定义漏斗颈部宽度
创建倒金字塔样式
配置渲染模式（
```
ValueIsHeight
```
与
```
ValueIsWidth
```
）
优化图表性能
处理边界场景和复杂需求

Quick Start Example

快速入门示例

Here's a minimal example to create a funnel chart with legend and data labels:

以下是创建带图例和数据标签的漏斗图的最简示例：

XAML Implementation

XAML 实现

xml

<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>

xml

<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# Implementation

C# 实现

csharp

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;
    }
}

csharp

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

csharp

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 }
        };
    }
}

csharp

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 }
        };
    }
}

Common Patterns

常用模式

Pattern 1: Sales Funnel with Custom Colors

模式1：带自定义配色的销售漏斗图

xml

<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>

xml

<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>

Pattern 2: Interactive Funnel with Selection

模式2：带选中功能的交互式漏斗图

xml

<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>

xml

<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>

Pattern 3: Exploded Segment Emphasis

模式3：区块突出分离强调效果

xml

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

xml

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

Key Properties Reference

核心属性参考

Essential Properties

基础属性

```
ItemsSource
```
- Data source for the chart
```
XBindingPath
```
- Property path for segment labels (stage names)
```
YBindingPath
```
- Property path for segment values
```
Header
```
- Chart title (string or UIElement)
```
Legend
```
- ChartLegend instance for displaying segment information

```
ItemsSource
```
- 图表的数据源
```
XBindingPath
```
- 区块标签（阶段名称）的属性路径
```
YBindingPath
```
- 区块数值的属性路径
```
Header
```
- 图表标题（字符串或UIElement）
```
Legend
```
- 用于展示区块信息的ChartLegend实例

Visual Properties

视觉属性

```
ShowDataLabels
```
- Enable/disable data labels (bool)
```
EnableTooltip
```
- Enable/disable tooltips (bool)
```
PaletteBrushes
```
- Custom color palette (BrushCollection)
```
GapRatio
```
- Spacing between segments (0.0 to 1.0)
```
MinimumWidth
```
- Neck width at the bottom (double)

```
ShowDataLabels
```
- 启用/禁用数据标签（布尔值）
```
EnableTooltip
```
- 启用/禁用提示框（布尔值）
```
PaletteBrushes
```
- 自定义配色方案（BrushCollection）
```
GapRatio
```
- 区块之间的间距（取值0.0到1.0）
```
MinimumWidth
```
- 漏斗底部的颈部宽度（双精度值）

Rendering Properties

渲染属性

```
Mode
```
- Rendering mode:
```
ValueIsHeight
```
or
```
ValueIsWidth
```
```
Height
```
/
```
Width
```
- Chart dimensions

```
Mode
```
- 渲染模式：
```
ValueIsHeight
```
或
```
ValueIsWidth
```
```
Height
```
/
```
Width
```
- 图表尺寸

Interaction Properties

交互属性

```
SelectionBehavior
```
- Configure segment selection
```
ExplodeIndex
```
- Index of segment to explode
```
ExplodeOffset
```
- Distance of exploded segment
```
ExplodeOnTap
```
- Enable interactive explosion

```
SelectionBehavior
```
- 配置区块选中功能
```
ExplodeIndex
```
- 需要突出分离的区块索引
```
ExplodeOffset
```
- 区块突出分离的距离
```
ExplodeOnTap
```
- 启用点击交互突出效果

Configuration Objects

配置对象

```
DataLabelSettings
```
- FunnelDataLabelSettings for label customization
```
TooltipBehavior
```
- ChartTooltipBehavior for tooltip customization

```
DataLabelSettings
```
- 用于标签自定义的FunnelDataLabelSettings实例
```
TooltipBehavior
```
- 用于提示框自定义的ChartTooltipBehavior实例

Common Use Cases

常见使用场景

Sales and Marketing Analytics

销售与营销分析

Visualize sales pipeline stages from leads to closed deals
Track marketing campaign conversion rates
Analyze customer acquisition funnels
Display website visitor conversion paths

可视化从线索到成交的销售管道阶段
追踪营销活动转化率
分析客户获取漏斗
展示网站访客转化路径

Business Process Analysis

业务流程分析

Recruitment pipeline visualization (applicants → hired)
Order fulfillment stages
Customer support ticket resolution flow
Product development milestones

招聘管道可视化（申请者→录用）
订单履约阶段展示
客户支持工单解决流程
产品开发里程碑展示

E-commerce and Retail

电商与零售

Shopping cart abandonment analysis
Checkout process completion rates
Product browsing to purchase conversion
Customer journey mapping

购物车弃购分析
结账流程完成率
商品浏览到购买的转化率
客户旅程地图

Financial Services

金融服务

Loan application process stages
Investment funnel analysis
Customer onboarding progress
Account upgrade conversion tracking

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

syncfusion-winui-funnel-chart

Original

Translation

Implementing Syncfusion WinUI Funnel Charts

实现Syncfusion WinUI漏斗图

When to Use This Skill

何时使用本技能

Component Overview

组件概述

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

Title Customization

标题自定义

Legend Configuration

图例配置

Data Labels

数据标签

Tooltips

提示框

Selection

选中功能

Exploding Segments

区块突出分离

Appearance and Styling

外观与样式

Advanced Features

高级功能

Quick Start Example

快速入门示例

XAML Implementation

XAML 实现

C# Implementation

C# 实现

ViewModel

ViewModel

Common Patterns

常用模式

Pattern 1: Sales Funnel with Custom Colors

模式1：带自定义配色的销售漏斗图

Pattern 2: Interactive Funnel with Selection

模式2：带选中功能的交互式漏斗图

Pattern 3: Exploded Segment Emphasis

模式3：区块突出分离强调效果

Key Properties Reference

核心属性参考

Essential Properties

基础属性

Visual Properties

视觉属性

Rendering Properties

渲染属性

Interaction Properties

交互属性

Configuration Objects

配置对象

Common Use Cases

常见使用场景

Sales and Marketing Analytics

销售与营销分析

Business Process Analysis

业务流程分析

E-commerce and Retail

电商与零售

Financial Services

金融服务

Related Skills

相关技能