syncfusion-wpf-bullet-graph

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Bullet Graphs in WPF

在WPF中实现Bullet Graph

Guide for implementing the Syncfusion® WPF Bullet Graph (

SfBulletGraph

) component. A bullet graph is a compact, linear visualization designed to display performance metrics by showing a primary measure (current value) against a target measure within qualitative ranges that indicate performance levels.

本指南介绍如何实现Syncfusion® WPF Bullet Graph（

SfBulletGraph

）组件。Bullet Graph是一种紧凑的线性可视化组件，通过展示主要度量值（当前值）与目标度量值的对比，并结合表示绩效水平的定性区间，来呈现绩效指标。

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Display performance metrics with current values versus targets
Create KPI dashboards with space-efficient visualizations
Show progress toward goals with visual performance indicators
Replace traditional gauges with more compact bullet graph displays
Visualize data in context using qualitative range backgrounds
Implement revenue analysis or expense tracking visualizations
Build dashboard environments where screen space is limited
Compare actual vs. target values in a single compact visualization

当你需要以下场景时，可使用此技能：

展示绩效指标：对比当前值与目标值
创建KPI仪表盘：使用空间高效的可视化组件
展示目标进度：通过可视化绩效指标
替代传统仪表：使用更紧凑的Bullet Graph展示
结合上下文可视化数据：使用定性区间背景
实现收入分析或费用追踪可视化
构建仪表盘环境：在屏幕空间有限的场景下
对比实际值与目标值：在单个紧凑可视化组件中

Component Overview

组件概述

The

SfBulletGraph

is a variation of the bar graph designed as a replacement for dashboard gauges and meters. It features:

Featured Measure: The primary data value (e.g., current year-to-date revenue) displayed as a prominent bar
Comparative Measure: A target or reference value displayed as a perpendicular line marker
Qualitative Ranges: Background color bands that provide context (e.g., poor, satisfactory, good)
Quantitative Scale: Configurable axis with major/minor ticks and labels
Caption Support: Descriptive labels to identify what the bullet graph represents
Orientation Options: Horizontal or vertical layout
Compact Design: Shows substantial data in minimal space

Typical Use Cases:

Revenue vs. target tracking
Expense analysis against budgets
Performance metrics on dashboards
KPI visualization
Goal progress indicators

SfBulletGraph

是条形图的一种变体，旨在替代仪表盘仪表和计量表。它具备以下特性：

特色度量：主要数据值（例如，本年度至今的收入），以突出显示的条形展示
对比度量：目标或参考值，以垂直线标记展示
定性区间：提供上下文的背景色带（例如，差、满意、优秀）
定量刻度：可配置的坐标轴，带有主/次刻度和标签
标题支持：描述性标签，用于标识Bullet Graph的代表内容
方向选项：水平或垂直布局
紧凑设计：在最小空间内展示大量数据

典型使用场景：

收入与目标追踪
费用与预算对比分析
仪表盘上的绩效指标
KPI可视化
目标进度指示器

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation via NuGet or Syncfusion Reference Manager
Assembly references (Syncfusion.SfBulletGraph.WPF)
Namespace declarations
Basic bullet graph creation in XAML and C#
Theme support and customization
First working example

📄 阅读：references/getting-started.md

通过NuGet或Syncfusion引用管理器安装
程序集引用（Syncfusion.SfBulletGraph.WPF）
命名空间声明
在XAML和C#中创建基础Bullet Graph
主题支持与自定义
第一个可运行示例

Quantitative Scale Configuration

定量刻度配置

📄 Read: references/quantitative-scale.md

Setting scale range (Minimum, Maximum, Interval)
Major tick configuration (size, stroke, color)
Minor tick configuration (per interval, size, stroke)
Label customization and formatting
Scale length adjustment
Tick and label visibility options

📄 阅读：references/quantitative-scale.md

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

Performance Measures

绩效度量

📄 Read: references/measures.md

Featured measure implementation (primary data value)
Featured measure bar customization (stroke, thickness)
Comparative measure implementation (target/goal marker)
Comparative measure symbol customization
Visual hierarchy and layering
Measure value binding

📄 阅读：references/measures.md

特色度量实现（主要数据值）
特色度量条形自定义（描边、粗细）
对比度量实现（目标/目标标记）
对比度量符号自定义
视觉层次与分层
度量值绑定

Qualitative Ranges

定性区间

📄 Read: references/ranges.md

Creating range collections (QualitativeRanges)
Range properties (RangeStart, RangeEnd, RangeStroke)
Range size and opacity customization
Binding range colors to ticks and labels
Common range patterns (Bad/Satisfactory/Good)
Best practices for range design

📄 阅读：references/ranges.md

创建区间集合（QualitativeRanges）
区间属性（RangeStart、RangeEnd、RangeStroke）
区间大小与透明度自定义
将区间颜色绑定到刻度和标签
常见区间模式（差/满意/优秀）
区间设计最佳实践

Caption Customization

标题自定义

📄 Read: references/caption.md

Adding captions to bullet graphs
Caption positioning (Near, Far)
Custom caption content and layouts
Multi-line captions with StackPanel
Caption styling and formatting
XAML and C# caption examples

📄 阅读：references/caption.md

为Bullet Graph添加标题
标题位置（Near、Far）
自定义标题内容与布局
使用StackPanel实现多行标题
标题样式与格式化
XAML和C#标题示例

Advanced Features

高级功能

📄 Read: references/advanced-features.md

Orientation (Horizontal, Vertical)
Flow direction (RTL support)
Tooltip configuration and customization
Custom tooltip templates for measures and ranges
Data binding scenarios
MVVM pattern implementation
Performance optimization tips

📄 阅读：references/advanced-features.md

方向（水平、垂直）
流向（RTL支持）
工具提示配置与自定义
度量和区间的自定义工具提示模板
数据绑定场景
MVVM模式实现
性能优化技巧

Quick Start Example

快速入门示例

Basic Bullet Graph in XAML

XAML中的基础Bullet Graph

xml

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

xml

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

Basic Bullet Graph in C#

C#中的基础Bullet Graph

csharp

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

csharp

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

Common Patterns

常见模式

Revenue Dashboard with Caption

带标题的收入仪表盘

xml

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

xml

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

Vertical Bullet Graph

垂直Bullet Graph

xml

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

xml

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

Bullet Graph with Tooltips

带工具提示的Bullet Graph

xml

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

xml

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

Key Properties

关键属性

Scale Properties

刻度属性

Minimum - Starting value of the quantitative scale
Maximum - Ending value of the quantitative scale
Interval - Distance between major ticks
MinorTicksPerInterval - Number of minor ticks between major ticks
QuantitativeScaleLength - Length of the scale in pixels

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

Measure Properties

度量属性

FeaturedMeasure - Primary data value (current performance)
FeaturedMeasureBarStroke - Color of the featured measure bar
FeaturedMeasureBarStrokeThickness - Thickness of the featured measure bar
ComparativeMeasure - Target or comparison value
ComparativeMeasureSymbolStroke - Color of the comparative measure marker
ComparativeMeasureSymbolStrokeThickness - Thickness of the comparative measure marker

FeaturedMeasure - 主要数据值（当前绩效）
FeaturedMeasureBarStroke - 特色度量条的颜色
FeaturedMeasureBarStrokeThickness - 特色度量条的粗细
ComparativeMeasure - 目标或对比值
ComparativeMeasureSymbolStroke - 对比度量标记的颜色
ComparativeMeasureSymbolStrokeThickness - 对比度量标记的粗细

Tick and Label Properties

刻度与标签属性

MajorTickSize - Size of major tick marks
MajorTickStroke - Color of major tick marks
MinorTickSize - Size of minor tick marks
MinorTickStroke - Color of minor tick marks
LabelStroke - Color of scale labels

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

Range Properties

区间属性

QualitativeRanges - Collection of qualitative range objects
QualitativeRangesSize - Height/width of the range bands
BindRangeStrokeToLabels - Sync label colors with range colors
BindRangeStrokeToTicks - Sync tick colors with range colors

QualitativeRanges - 定性区间对象的集合
QualitativeRangesSize - 区间带的高度/宽度
BindRangeStrokeToLabels - 同步标签颜色与区间颜色
BindRangeStrokeToTicks - 同步刻度颜色与区间颜色

Layout Properties

布局属性

Orientation - Horizontal or Vertical layout
FlowDirection - LeftToRight or RightToLeft
Caption - Descriptive content for the bullet graph
CaptionPosition - Near (left/top) or Far (right/bottom)

Orientation - 水平或垂直布局
FlowDirection - 从左到右或从右到左
Caption - Bullet Graph的描述性内容
CaptionPosition - Near（左/上）或Far（右/下）

Tooltip Properties

工具提示属性

ShowToolTip - Enable/disable tooltip display
FeaturedMeasureToolTipTemplate - Custom template for featured measure tooltip
ComparativeMeasureToolTipTemplate - Custom template for comparative measure tooltip
QualitativeRangeToolTipTemplate - Custom template for range tooltip

ShowToolTip - 启用/禁用工具提示显示
FeaturedMeasureToolTipTemplate - 特色度量工具提示的自定义模板
ComparativeMeasureToolTipTemplate - 对比度量工具提示的自定义模板
QualitativeRangeToolTipTemplate - 区间工具提示的自定义模板