syncfusion-winforms-bullet-graph

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion Windows Forms Bullet Graph

实现 Syncfusion Windows Forms Bullet Graph

Expert guidance for implementing the Syncfusion Bullet Graph control in Windows Forms applications. The Bullet Graph is a compact, space-efficient data visualization control designed for dashboards, replacing traditional gauges and meters. It displays a primary measure (featured measure) compared to a target (comparative measure) within qualitative performance ranges.
本指南提供在Windows Forms应用中实现Syncfusion Bullet Graph控件的专业指导。Bullet Graph是一种紧凑、节省空间的数据可视化控件,专为仪表盘设计,可替代传统的计量表和仪表。它能在定性性能范围内展示与目标值(对比度量)相比较的主要指标(特征度量)。

When to Use This Skill

何时使用本技能

Use this skill when you need to:
  • Display KPIs (Key Performance Indicators) in a compact dashboard layout
  • Show current performance against targets (actual vs goal)
  • Visualize data with performance ranges (poor, satisfactory, good)
  • Create revenue analysis or expense tracking visualizations
  • Replace traditional gauges and meters with space-efficient alternatives
  • Compare actual values to benchmarks or targets
  • Build executive dashboards requiring high information density
  • Implement year-to-date (YTD) metrics visualization
当你需要完成以下需求时可使用本技能:
  • 在紧凑型仪表盘布局中展示KPI(关键绩效指标)
  • 展示当前性能与目标的对比情况(实际值 vs 目标值)
  • 结合性能范围(差、合格、良好)可视化展示数据
  • 创建营收分析或支出追踪可视化模块
  • 用节省空间的方案替代传统计量表和仪表
  • 对比实际值与基准值或目标值
  • 搭建需要高信息密度的高管仪表盘
  • 实现年初至今(YTD)指标的可视化

Component Overview

组件概述

The Bullet Graph consists of:
  • Featured Measure: Primary data bar showing the current value (e.g., actual revenue)
  • Comparative Measure: Target line showing the goal or benchmark (e.g., target revenue)
  • Qualitative Ranges: Background bands indicating performance levels (e.g., poor, satisfactory, good)
  • Quantitative Scale: Axis with ticks and labels showing numeric values
  • Caption: Label describing what the graph represents
Bullet Graph 由以下部分组成:
  • Featured Measure:展示当前值的主数据条(例如实际营收)
  • Comparative Measure:展示目标或基准的目标线(例如目标营收)
  • Qualitative Ranges:标识性能等级的背景带(例如差、合格、良好)
  • Quantitative Scale:带有刻度和标签的数值轴
  • Caption:描述图表含义的标签

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
  • Assembly deployment and NuGet package installation
  • Creating Bullet Graph programmatically in code
  • Using Syncfusion Reference Manager for Visual Studio integration
  • Basic initialization and first working example
  • Required namespaces and assemblies
📄 阅读: references/getting-started.md
  • 程序集部署和NuGet包安装
  • 用代码编程创建Bullet Graph
  • 配合Visual Studio使用Syncfusion Reference Manager集成
  • 基础初始化和首个可运行示例
  • 所需的命名空间和程序集

Measures (Featured and Comparative)

度量(特征度量与对比度量)

📄 Read: references/measures.md
  • Featured measure: primary data bar configuration
  • Featured measure customization (color, thickness)
  • Comparative measure: target line configuration
  • Comparative measure customization (symbol color, thickness)
  • Visual hierarchy and positioning
📄 阅读: references/measures.md
  • 特征度量:主数据条配置
  • 特征度量自定义(颜色、厚度)
  • 对比度量:目标线配置
  • 对比度量自定义(符号颜色、厚度)
  • 视觉层级和位置设置

Qualitative Ranges

定性范围

📄 Read: references/qualitative-ranges.md
  • Adding and configuring qualitative ranges collection
  • Range properties (RangeEnd, RangeStroke, RangeCaption)
  • Customizing range size and opacity
  • Binding range colors to ticks and labels
  • Performance indicator patterns (good, satisfactory, poor)
📄 阅读: references/qualitative-ranges.md
  • 添加和配置定性范围集合
  • 范围属性(RangeEnd、RangeStroke、RangeCaption)
  • 自定义范围大小和透明度
  • 将范围颜色绑定到刻度和标签
  • 性能指标模式(良好、合格、差)

Scale Ticks

刻度线

📄 Read: references/scale-and-ticks.md
  • Major ticks and minor ticks configuration
  • Tick customization (stroke, size, thickness)
  • Tick positioning (Above, Below, Cross)
  • Interval and MinorTicksPerInterval settings
  • Visual customization examples
📄 阅读: references/scale-and-ticks.md
  • 主刻度和次刻度配置
  • 刻度自定义(描边、大小、厚度)
  • 刻度位置(上方、下方、交叉)
  • 间隔和每间隔次刻度数量设置
  • 视觉自定义示例

Scale Labels

刻度标签

📄 Read: references/scale-labels.md
  • Label properties and numeric values
  • Label customization (font size, color, offset)
  • Label formatting patterns (LabelFormat)
  • Label positioning (Above, Below)
📄 阅读: references/scale-labels.md
  • 标签属性和数值
  • 标签自定义(字体大小、颜色、偏移量)
  • 标签格式化规则(LabelFormat)
  • 标签位置(上方、下方)

Layout and Orientation

布局与方向

📄 Read: references/layout-and-orientation.md
  • Orientation (Horizontal, Vertical)
  • Flow direction (Forward, Backward)
  • Caption and caption positioning (Near, Far)
  • Quantitative scale length customization
  • Layout properties and docking
📄 阅读: references/layout-and-orientation.md
  • 方向(水平、垂直)
  • 流向(正向、反向)
  • 标题和标题位置(靠近、远离)
  • 数值轴长度自定义
  • 布局属性和停靠设置

Quick Start Example

快速入门示例

csharp
using System;
using System.Drawing;
using System.Windows.Forms;
using Syncfusion.Windows.Forms.BulletGraph;

namespace BulletGraphDemo
{
    public class MainForm : Form
    {
        public MainForm()
        {
            // Create Bullet Graph
            BulletGraph bullet = new BulletGraph();
            bullet.Dock = DockStyle.Fill;
            
            // Set orientation and flow
            bullet.FlowDirection = BulletGraphFlowDirection.Forward;
            bullet.Orientation = Orientation.Horizontal;
            
            // Configure measures
            bullet.FeaturedMeasure = 4.5;      // Actual value
            bullet.ComparativeMeasure = 7;     // Target value
            
            // Configure scale
            bullet.Minimum = 0;
            bullet.Maximum = 10;
            bullet.Interval = 2;
            bullet.MinorTicksPerInterval = 3;
            
            // Add qualitative ranges
            bullet.QualitativeRanges.Add(new QualitativeRange() 
            { 
                RangeEnd = 4, 
                RangeCaption = "Bad", 
                RangeStroke = Color.Red 
            });
            
            bullet.QualitativeRanges.Add(new QualitativeRange() 
            { 
                RangeEnd = 7, 
                RangeCaption = "Satisfactory", 
                RangeStroke = Color.Yellow 
            });
            
            bullet.QualitativeRanges.Add(new QualitativeRange() 
            { 
                RangeEnd = 10, 
                RangeCaption = "Good", 
                RangeStroke = Color.Green 
            });
            
            // Add caption
            bullet.Caption = "Revenue YTD\n$ in thousands";
            
            // Add to form
            this.Controls.Add(bullet);
        }
    }
}
csharp
using System;
using System.Drawing;
using System.Windows.Forms;
using Syncfusion.Windows.Forms.BulletGraph;

namespace BulletGraphDemo
{
    public class MainForm : Form
    {
        public MainForm()
        {
            // Create Bullet Graph
            BulletGraph bullet = new BulletGraph();
            bullet.Dock = DockStyle.Fill;
            
            // Set orientation and flow
            bullet.FlowDirection = BulletGraphFlowDirection.Forward;
            bullet.Orientation = Orientation.Horizontal;
            
            // Configure measures
            bullet.FeaturedMeasure = 4.5;      // Actual value
            bullet.ComparativeMeasure = 7;     // Target value
            
            // Configure scale
            bullet.Minimum = 0;
            bullet.Maximum = 10;
            bullet.Interval = 2;
            bullet.MinorTicksPerInterval = 3;
            
            // Add qualitative ranges
            bullet.QualitativeRanges.Add(new QualitativeRange() 
            { 
                RangeEnd = 4, 
                RangeCaption = "Bad", 
                RangeStroke = Color.Red 
            });
            
            bullet.QualitativeRanges.Add(new QualitativeRange() 
            { 
                RangeEnd = 7, 
                RangeCaption = "Satisfactory", 
                RangeStroke = Color.Yellow 
            });
            
            bullet.QualitativeRanges.Add(new QualitativeRange() 
            { 
                RangeEnd = 10, 
                RangeCaption = "Good", 
                RangeStroke = Color.Green 
            });
            
            // Add caption
            bullet.Caption = "Revenue YTD\n$ in thousands";
            
            // Add to form
            this.Controls.Add(bullet);
        }
    }
}

Common Patterns

常用模式

Revenue Tracking Dashboard

营收追踪仪表盘

csharp
BulletGraph revenueGraph = new BulletGraph();
revenueGraph.Dock = DockStyle.Top;
revenueGraph.Height = 100;
revenueGraph.Caption = "Revenue YTD\n$ in thousands";
revenueGraph.CaptionPosition = BulletGraphCaptionPosition.Near;

// Set actual vs target
revenueGraph.FeaturedMeasure = 275;     // Actual: $275k
revenueGraph.ComparativeMeasure = 300;  // Target: $300k

// Configure scale
revenueGraph.Minimum = 0;
revenueGraph.Maximum = 400;
revenueGraph.Interval = 100;
revenueGraph.LabelFormat = "$#0K";

// Performance ranges
revenueGraph.QualitativeRanges.Add(new QualitativeRange() 
    { RangeEnd = 200, RangeStroke = Color.FromArgb(255, 200, 200) });  // Poor
revenueGraph.QualitativeRanges.Add(new QualitativeRange() 
    { RangeEnd = 300, RangeStroke = Color.FromArgb(255, 255, 200) });  // Fair
revenueGraph.QualitativeRanges.Add(new QualitativeRange() 
    { RangeEnd = 400, RangeStroke = Color.FromArgb(200, 255, 200) });  // Good
csharp
BulletGraph revenueGraph = new BulletGraph();
revenueGraph.Dock = DockStyle.Top;
revenueGraph.Height = 100;
revenueGraph.Caption = "Revenue YTD\n$ in thousands";
revenueGraph.CaptionPosition = BulletGraphCaptionPosition.Near;

// Set actual vs target
revenueGraph.FeaturedMeasure = 275;     // Actual: $275k
revenueGraph.ComparativeMeasure = 300;  // Target: $300k

// Configure scale
revenueGraph.Minimum = 0;
revenueGraph.Maximum = 400;
revenueGraph.Interval = 100;
revenueGraph.LabelFormat = "$#0K";

// Performance ranges
revenueGraph.QualitativeRanges.Add(new QualitativeRange() 
    { RangeEnd = 200, RangeStroke = Color.FromArgb(255, 200, 200) });  // Poor
revenueGraph.QualitativeRanges.Add(new QualitativeRange() 
    { RangeEnd = 300, RangeStroke = Color.FromArgb(255, 255, 200) });  // Fair
revenueGraph.QualitativeRanges.Add(new QualitativeRange() 
    { RangeEnd = 400, RangeStroke = Color.FromArgb(200, 255, 200) });  // Good

Vertical KPI Display

垂直KPI展示

csharp
BulletGraph kpiGraph = new BulletGraph();
kpiGraph.Orientation = Orientation.Vertical;
kpiGraph.FlowDirection = BulletGraphFlowDirection.Backward;
kpiGraph.Dock = DockStyle.Left;
kpiGraph.Width = 150;

kpiGraph.Caption = "Customer\nSatisfaction";
kpiGraph.CaptionPosition = BulletGraphCaptionPosition.Far;

kpiGraph.FeaturedMeasure = 8.5;   // Current score
kpiGraph.ComparativeMeasure = 9;  // Target score

kpiGraph.Minimum = 0;
kpiGraph.Maximum = 10;
kpiGraph.Interval = 2;
csharp
BulletGraph kpiGraph = new BulletGraph();
kpiGraph.Orientation = Orientation.Vertical;
kpiGraph.FlowDirection = BulletGraphFlowDirection.Backward;
kpiGraph.Dock = DockStyle.Left;
kpiGraph.Width = 150;

kpiGraph.Caption = "Customer\nSatisfaction";
kpiGraph.CaptionPosition = BulletGraphCaptionPosition.Far;

kpiGraph.FeaturedMeasure = 8.5;   // Current score
kpiGraph.ComparativeMeasure = 9;  // Target score

kpiGraph.Minimum = 0;
kpiGraph.Maximum = 10;
kpiGraph.Interval = 2;

Styled Bullet Graph with Custom Colors

自定义配色的Bullet Graph样式

csharp
BulletGraph styledGraph = new BulletGraph();

// Customize featured measure bar
styledGraph.FeaturedMeasure = 65;
styledGraph.FeaturedMeasureBarStroke = Color.DarkBlue;
styledGraph.FeaturedMeasureBarStrokeThickness = 8;

// Customize comparative measure
styledGraph.ComparativeMeasure = 80;
styledGraph.ComparativeMeasureSymbolStroke = Color.Red;
styledGraph.ComparativeMeasureSymbolStrokeThickness = 3;

// Customize ticks and labels
styledGraph.MajorTickStroke = Color.Black;
styledGraph.MajorTickSize = 15;
styledGraph.MinorTickStroke = Color.Gray;
styledGraph.MinorTickSize = 10;
styledGraph.LabelFontSize = 12;
styledGraph.LabelStroke = Color.Black;
csharp
BulletGraph styledGraph = new BulletGraph();

// Customize featured measure bar
styledGraph.FeaturedMeasure = 65;
styledGraph.FeaturedMeasureBarStroke = Color.DarkBlue;
styledGraph.FeaturedMeasureBarStrokeThickness = 8;

// Customize comparative measure
styledGraph.ComparativeMeasure = 80;
styledGraph.ComparativeMeasureSymbolStroke = Color.Red;
styledGraph.ComparativeMeasureSymbolStrokeThickness = 3;

// Customize ticks and labels
styledGraph.MajorTickStroke = Color.Black;
styledGraph.MajorTickSize = 15;
styledGraph.MinorTickStroke = Color.Gray;
styledGraph.MinorTickSize = 10;
styledGraph.LabelFontSize = 12;
styledGraph.LabelStroke = Color.Black;

Multiple Bullet Graphs in Dashboard

仪表盘内的多Bullet Graph组合

csharp
// Stack multiple bullet graphs vertically
BulletGraph[] metrics = new BulletGraph[3];
string[] captions = { "Sales\n$ in thousands", "Profit\n$ in thousands", "Customers\ncount" };
double[] actuals = { 275, 45, 1250 };
double[] targets = { 300, 50, 1500 };

for (int i = 0; i < 3; i++)
{
    metrics[i] = new BulletGraph();
    metrics[i].Dock = DockStyle.Top;
    metrics[i].Height = 80;
    metrics[i].Caption = captions[i];
    metrics[i].FeaturedMeasure = actuals[i];
    metrics[i].ComparativeMeasure = targets[i];
    
    // Add standard ranges
    metrics[i].QualitativeRanges.Add(new QualitativeRange() 
        { RangeEnd = targets[i] * 0.6, RangeStroke = Color.LightCoral });
    metrics[i].QualitativeRanges.Add(new QualitativeRange() 
        { RangeEnd = targets[i] * 0.9, RangeStroke = Color.LightYellow });
    metrics[i].QualitativeRanges.Add(new QualitativeRange() 
        { RangeEnd = targets[i] * 1.2, RangeStroke = Color.LightGreen });
    
    this.Controls.Add(metrics[i]);
}
csharp
// Stack multiple bullet graphs vertically
BulletGraph[] metrics = new BulletGraph[3];
string[] captions = { "Sales\n$ in thousands", "Profit\n$ in thousands", "Customers\ncount" };
double[] actuals = { 275, 45, 1250 };
double[] targets = { 300, 50, 1500 };

for (int i = 0; i < 3; i++)
{
    metrics[i] = new BulletGraph();
    metrics[i].Dock = DockStyle.Top;
    metrics[i].Height = 80;
    metrics[i].Caption = captions[i];
    metrics[i].FeaturedMeasure = actuals[i];
    metrics[i].ComparativeMeasure = targets[i];
    
    // Add standard ranges
    metrics[i].QualitativeRanges.Add(new QualitativeRange() 
        { RangeEnd = targets[i] * 0.6, RangeStroke = Color.LightCoral });
    metrics[i].QualitativeRanges.Add(new QualitativeRange() 
        { RangeEnd = targets[i] * 0.9, RangeStroke = Color.LightYellow });
    metrics[i].QualitativeRanges.Add(new QualitativeRange() 
        { RangeEnd = targets[i] * 1.2, RangeStroke = Color.LightGreen });
    
    this.Controls.Add(metrics[i]);
}

Key Properties Reference

核心属性参考

Measures

度量

PropertyTypeDescription
FeaturedMeasure
doublePrimary value to display (current/actual)
FeaturedMeasureBarStroke
ColorColor of the featured measure bar
FeaturedMeasureBarStrokeThickness
intThickness of the featured measure bar
ComparativeMeasure
doubleTarget or benchmark value
ComparativeMeasureSymbolStroke
ColorColor of the comparative measure line
ComparativeMeasureSymbolStrokeThickness
intThickness of the comparative measure line
属性类型描述
FeaturedMeasure
double要展示的主值(当前/实际值)
FeaturedMeasureBarStroke
Color特征度量条的颜色
FeaturedMeasureBarStrokeThickness
int特征度量条的厚度
ComparativeMeasure
double目标值或基准值
ComparativeMeasureSymbolStroke
Color对比度量线的颜色
ComparativeMeasureSymbolStrokeThickness
int对比度量线的厚度

Scale

刻度

PropertyTypeDescription
Minimum
doubleStarting value of the scale
Maximum
doubleEnding value of the scale
Interval
doubleSpacing between major ticks
MinorTicksPerInterval
intNumber of minor ticks between major ticks
属性类型描述
Minimum
double刻度起始值
Maximum
double刻度结束值
Interval
double主刻度之间的间隔
MinorTicksPerInterval
int主刻度之间的次刻度数量

Layout

布局

PropertyTypeDescription
Orientation
OrientationHorizontal or Vertical display
FlowDirection
BulletGraphFlowDirectionForward or Backward flow
Caption
stringLabel describing the metric
CaptionPosition
BulletGraphCaptionPositionNear or Far caption placement
属性类型描述
Orientation
Orientation水平或垂直展示
FlowDirection
BulletGraphFlowDirection正向或反向流向
Caption
string描述指标的标签
CaptionPosition
BulletGraphCaptionPosition标题放置位置(靠近/远离)

Ranges

范围

PropertyTypeDescription
QualitativeRanges
QualitativeRangeCollectionCollection of qualitative range objects
QualitativeRangesSize
intWidth/height of the range bands
属性类型描述
QualitativeRanges
QualitativeRangeCollection定性范围对象集合
QualitativeRangesSize
int范围带的宽度/高度

Common Use Cases

常见使用场景

  1. Executive Dashboards: Display multiple KPIs in compact space
  2. Financial Reports: Revenue, profit, and expense tracking
  3. Sales Performance: Quota attainment visualization
  4. Customer Metrics: Satisfaction scores, retention rates
  5. Operational KPIs: Efficiency, throughput, quality metrics
  6. Project Management: Budget vs actual, schedule performance
  7. Manufacturing: Production targets, defect rates, utilization
  1. 高管仪表盘:在紧凑空间内展示多个KPI
  2. 财务报表:营收、利润和支出追踪
  3. 销售绩效:配额完成情况可视化
  4. 客户指标:满意度评分、留存率
  5. 运营KPI:效率、吞吐量、质量指标
  6. 项目管理:预算与实际对比、进度绩效
  7. 制造业:生产目标、缺陷率、利用率