syncfusion-winui-funnel-chart

用途

Syncfusion WinUI 漏斗图（SfFunnelChart）是 Syncfusion.Chart.WinUI NuGet 包中的专用数据可视化控件，用于表示在流程各阶段逐步递减的数据。它适用于分析转化率、销售管道、招聘流程以及任何具有顺序阶段的工作流。

主要能力

数据绑定：通过 ItemsSource、XBindingPath 和 YBindingPath 绑定数据。
视觉定制：支持标题、图例、数据标签和外观设置。
交互功能：包括工具提示、选择和分段爆炸。
灵活渲染：支持多种渲染模式和布局选项。
丰富样式：使用调色板、渐变和自定义模板。

使用方式

该技能提供多个参考文档，按功能组织：

入门：安装 Syncfusion.Chart.WinUI NuGet 包，使用 XAML 或 C# 设置基本图表结构，配置命名空间导入（Syncfusion.UI.Xaml.Charts），创建并绑定 ViewModel，设置 XBindingPath 和 YBindingPath，显示基本漏斗图。
标题定制：使用 Header 属性添加标题，自定义模板、对齐方式、样式和复杂布局。
图例配置：启用和配置图例，添加标题、自定义图标、控制间距和布局、添加复选框、定位、样式和自定义模板。
数据标签：使用 ShowDataLabels 启用，配置上下文（YValue、Percentage、XValue），自定义外观、格式、旋转和模板。
工具提示：使用 EnableTooltip 启用，配置 ChartTooltipBehavior，样式化背景、边框、文本，控制位置、时序和自定义模板。
选择：使用 DataPointSelectionBehavior 启用，配置选择类型（Single、SingleDeselect、Multiple、None），自定义 SelectionBrush，程序化选择，处理事件。
分段爆炸：爆炸特定分段，配置 ExplodeIndex、ExplodeOffset、ExplodeOnTap。
外观和样式：应用预定义调色板、自定义调色板、线性/径向渐变、渐变停止点和颜色。
高级功能：使用 GapRatio 添加间距，MinimumWidth 自定义颈部宽度，创建倒金字塔，配置渲染模式（ValueIsHeight vs 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 组件的一部分，使用前需安装 Syncfusion.Chart.WinUI NuGet 包。

技能介绍

用途

主要能力

使用方式

适用场景

限制