syncfusion-winforms-bullet-graph
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseImplementing 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) }); // Goodcsharp
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) }); // GoodVertical 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
度量
| Property | Type | Description |
|---|---|---|
| double | Primary value to display (current/actual) |
| Color | Color of the featured measure bar |
| int | Thickness of the featured measure bar |
| double | Target or benchmark value |
| Color | Color of the comparative measure line |
| int | Thickness of the comparative measure line |
| 属性 | 类型 | 描述 |
|---|---|---|
| double | 要展示的主值(当前/实际值) |
| Color | 特征度量条的颜色 |
| int | 特征度量条的厚度 |
| double | 目标值或基准值 |
| Color | 对比度量线的颜色 |
| int | 对比度量线的厚度 |
Scale
刻度
| Property | Type | Description |
|---|---|---|
| double | Starting value of the scale |
| double | Ending value of the scale |
| double | Spacing between major ticks |
| int | Number of minor ticks between major ticks |
| 属性 | 类型 | 描述 |
|---|---|---|
| double | 刻度起始值 |
| double | 刻度结束值 |
| double | 主刻度之间的间隔 |
| int | 主刻度之间的次刻度数量 |
Layout
布局
| Property | Type | Description |
|---|---|---|
| Orientation | Horizontal or Vertical display |
| BulletGraphFlowDirection | Forward or Backward flow |
| string | Label describing the metric |
| BulletGraphCaptionPosition | Near or Far caption placement |
| 属性 | 类型 | 描述 |
|---|---|---|
| Orientation | 水平或垂直展示 |
| BulletGraphFlowDirection | 正向或反向流向 |
| string | 描述指标的标签 |
| BulletGraphCaptionPosition | 标题放置位置(靠近/远离) |
Ranges
范围
| Property | Type | Description |
|---|---|---|
| QualitativeRangeCollection | Collection of qualitative range objects |
| int | Width/height of the range bands |
| 属性 | 类型 | 描述 |
|---|---|---|
| QualitativeRangeCollection | 定性范围对象集合 |
| int | 范围带的宽度/高度 |
Common Use Cases
常见使用场景
- Executive Dashboards: Display multiple KPIs in compact space
- Financial Reports: Revenue, profit, and expense tracking
- Sales Performance: Quota attainment visualization
- Customer Metrics: Satisfaction scores, retention rates
- Operational KPIs: Efficiency, throughput, quality metrics
- Project Management: Budget vs actual, schedule performance
- Manufacturing: Production targets, defect rates, utilization
- 高管仪表盘:在紧凑空间内展示多个KPI
- 财务报表:营收、利润和支出追踪
- 销售绩效:配额完成情况可视化
- 客户指标:满意度评分、留存率
- 运营KPI:效率、吞吐量、质量指标
- 项目管理:预算与实际对比、进度绩效
- 制造业:生产目标、缺陷率、利用率