syncfusion-wpf-bullet-graph

在 WPF 中实现子弹图

Syncfusion® WPF 子弹图（SfBulletGraph）组件的实现指南。子弹图是一种紧凑的线性可视化方式，通过在表示不同绩效水平的定性范围内，将主要度量值（当前值）与目标度量值进行对比，来展示绩效指标。

何时使用此技能

在以下情况下使用此技能：

• 展示绩效指标，对比当前值与目标值
• 创建 KPI 仪表板，使用节省空间的可视化方式
• 显示目标进度，并通过可视化指标呈现绩效
• 用更紧凑的子弹图替代传统仪表盘
• 在上下文中可视化数据，使用定性范围作为背景
• 实现收入分析或支出跟踪可视化
• 构建仪表板环境，其中屏幕空间有限
• 在单个紧凑的可视化图表中比较实际值与目标值

组件概述

SfBulletGraph 是条形图的一种变体，旨在替代仪表板中的仪表盘和计量表。其特点包括：

• 主要度量值： 作为醒目条形显示的主要数据值（例如，本年度迄今收入）
• 比较度量值： 以垂直线标记显示的目标值或参考值
• 定性范围： 提供上下文信息的背景色带（例如，较差、合格、良好）
• 定量刻度： 可配置的坐标轴，包含主刻度、次刻度和标签
• 标题支持： 用于说明子弹图所表示内容的描述性标签
• 方向选项： 水平或垂直布局
• 紧凑设计： 以极少空间展示大量数据

典型用例：

• 收入与目标值跟踪
• 对照预算进行支出分析
• 在仪表板上展示绩效指标
• KPI 可视化
• 目标进度指标

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 通过 NuGet 或 Syncfusion Reference Manager 安装
• 程序集引用（Syncfusion.SfBulletGraph.WPF）
• 命名空间声明
• 使用 XAML 和 C# 创建基本子弹图
• 主题支持和自定义
• 第一个可运行示例

定量刻度配置

📄 阅读： references/quantitative-scale.md

• 设置刻度范围（Minimum、Maximum、Interval）
• 主刻度配置（大小、描边、颜色）
• 次刻度配置（每个间隔的刻度数量、大小、描边）
• 标签自定义和格式设置
• 调整刻度长度
• 刻度和标签的可见性选项

绩效度量值

📄 阅读： references/measures.md

• 实现主要度量值（主要数据值）
• 自定义主要度量值条形（描边、粗细）
• 实现比较度量值（目标／目标值标记）
• 自定义比较度量值符号
• 视觉层次和图层顺序
• 度量值绑定

定性范围

📄 阅读： references/ranges.md

• 创建范围集合（QualitativeRanges）
• 范围属性（RangeStart、RangeEnd、RangeStroke）
• 自定义范围大小和不透明度
• 将范围颜色绑定到刻度和标签
• 常见范围模式（较差／合格／良好）
• 范围设计最佳实践

标题自定义

📄 阅读： references/caption.md

• 为子弹图添加标题
• 标题位置（Near、Far）
• 自定义标题内容和布局
• 使用 StackPanel 创建多行标题
• 标题样式和格式设置
• XAML 和 C# 标题示例

高级功能

📄 阅读： references/advanced-features.md

• 方向（Horizontal、Vertical）
• 流向（支持 RTL）
• 工具提示配置和自定义
• 为度量值和范围自定义工具提示模板
• 数据绑定场景
• MVVM 模式实现
• 性能优化技巧

快速入门示例

XAML 中的基本子弹图

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <syncfusion:SfBulletGraph 
            Minimum="0" 
            Maximum="10" 
            Interval="2"
            FeaturedMeasure="5" 
            ComparativeMeasure="7"
            MinorTicksPerInterval="3"
            MajorTickSize="15" 
            MinorTickSize="10">
            
            <syncfusion:SfBulletGraph.QualitativeRanges>
                <syncfusion:QualitativeRange RangeEnd="4.5" RangeStroke="#EBEBEB"/>
                <syncfusion:QualitativeRange RangeEnd="7.5" RangeStroke="#D8D8D8"/>
                <syncfusion:QualitativeRange RangeEnd="10" RangeStroke="#7F7F7F"/>
            </syncfusion:SfBulletGraph.QualitativeRanges>
        </syncfusion:SfBulletGraph>
    </Grid>
</Window>

C# 中的基本子弹图

using Syncfusion.UI.Xaml.BulletGraph;

SfBulletGraph bulletGraph = new SfBulletGraph();
bulletGraph.Minimum = 0;
bulletGraph.Maximum = 10;
bulletGraph.Interval = 2;
bulletGraph.FeaturedMeasure = 5;
bulletGraph.ComparativeMeasure = 7;
bulletGraph.MinorTicksPerInterval = 3;
bulletGraph.MajorTickSize = 15;
bulletGraph.MinorTickSize = 10;

bulletGraph.QualitativeRanges.Add(new QualitativeRange() 
{ 
    RangeEnd = 4.5, 
    RangeStroke = new SolidColorBrush(Color.FromRgb(235, 235, 235)) 
});
bulletGraph.QualitativeRanges.Add(new QualitativeRange() 
{ 
    RangeEnd = 7.5, 
    RangeStroke = new SolidColorBrush(Color.FromRgb(216, 216, 216)) 
});
bulletGraph.QualitativeRanges.Add(new QualitativeRange() 
{ 
    RangeEnd = 10, 
    RangeStroke = new SolidColorBrush(Color.FromRgb(127, 127, 127)) 
});

this.Grid.Children.Add(bulletGraph);

常见模式

带标题的收入仪表板

<syncfusion:SfBulletGraph 
    Minimum="0" 
    Maximum="100" 
    Interval="20"
    FeaturedMeasure="65" 
    ComparativeMeasure="80"
    CaptionPosition="Far"
    QualitativeRangesSize="30">
    
    <syncfusion:SfBulletGraph.Caption>
        <StackPanel Margin="0,0,10,0">
            <TextBlock Text="Revenue YTD" FontSize="13" HorizontalAlignment="Center"/>
            <TextBlock Text="$ in Thousands" FontSize="13" HorizontalAlignment="Center"/>
        </StackPanel>
    </syncfusion:SfBulletGraph.Caption>
    
    <syncfusion:SfBulletGraph.QualitativeRanges>
        <syncfusion:QualitativeRange RangeEnd="35" RangeStroke="Red" RangeOpacity="1"/>
        <syncfusion:QualitativeRange RangeEnd="70" RangeStroke="Yellow" RangeOpacity="1"/>
        <syncfusion:QualitativeRange RangeEnd="100" RangeStroke="Green" RangeOpacity="1"/>
    </syncfusion:SfBulletGraph.QualitativeRanges>
</syncfusion:SfBulletGraph>

垂直子弹图

<syncfusion:SfBulletGraph 
    Orientation="Vertical"
    Minimum="0" 
    Maximum="100" 
    Interval="25"
    FeaturedMeasure="75" 
    ComparativeMeasure="90"
    FeaturedMeasureBarStroke="Black">
    
    <syncfusion:SfBulletGraph.QualitativeRanges>
        <syncfusion:QualitativeRange RangeEnd="40" RangeStroke="#FF6B6B"/>
        <syncfusion:QualitativeRange RangeEnd="75" RangeStroke="#FFE66D"/>
        <syncfusion:QualitativeRange RangeEnd="100" RangeStroke="#95E1D3"/>
    </syncfusion:SfBulletGraph.QualitativeRanges>
</syncfusion:SfBulletGraph>

带工具提示的子弹图

<syncfusion:SfBulletGraph 
    Minimum="0" 
    Maximum="10" 
    FeaturedMeasure="6.5" 
    ComparativeMeasure="8"
    ShowToolTip="True"
    QualitativeRangesSize="30">
    
    <syncfusion:SfBulletGraph.QualitativeRanges>
        <syncfusion:QualitativeRange RangeEnd="4" RangeStroke="Red" RangeOpacity="0.8"/>
        <syncfusion:QualitativeRange RangeEnd="7" RangeStroke="Yellow" RangeOpacity="0.8"/>
        <syncfusion:QualitativeRange RangeEnd="10" RangeStroke="Green" RangeOpacity="0.8"/>
    </syncfusion:SfBulletGraph.QualitativeRanges>
</syncfusion:SfBulletGraph>

关键属性

刻度属性

• Minimum - 定量刻度的起始值
• Maximum - 定量刻度的结束值
• Interval - 主刻度之间的距离
• MinorTicksPerInterval - 主刻度之间的次刻度数量
• QuantitativeScaleLength - 刻度的长度（像素）

测量值属性

• FeaturedMeasure - 主要数据值（当前表现）
• FeaturedMeasureBarStroke - 主要测量值条的颜色
• FeaturedMeasureBarStrokeThickness - 主要测量值条的粗细
• ComparativeMeasure - 目标值或比较值
• ComparativeMeasureSymbolStroke - 比较测量值标记的颜色
• ComparativeMeasureSymbolStrokeThickness - 比较测量值标记的粗细

刻度线和标签属性

• MajorTickSize - 主刻度线的大小
• MajorTickStroke - 主刻度线的颜色
• MinorTickSize - 次刻度线的大小
• MinorTickStroke - 次刻度线的颜色
• LabelStroke - 刻度标签的颜色

范围属性

• QualitativeRanges - 定性范围对象的集合
• QualitativeRangesSize - 范围带的高度／宽度
• BindRangeStrokeToLabels - 将标签颜色与范围颜色同步
• BindRangeStrokeToTicks - 将刻度线颜色与范围颜色同步

布局属性

• Orientation - 水平或垂直布局
• FlowDirection - 从左到右或从右到左
• Caption - 子弹图的描述性内容
• CaptionPosition - 近端（左侧／顶部）或远端（右侧／底部）

工具提示属性

• ShowToolTip - 启用／禁用工具提示显示
• FeaturedMeasureToolTipTemplate - 主要测量值工具提示的自定义模板
• ComparativeMeasureToolTipTemplate - 比较测量值工具提示的自定义模板
• QualitativeRangeToolTipTemplate - 范围工具提示的自定义模板