syncfusion-winforms-bullet-graph

实现 Syncfusion Windows Forms 子弹图

在 Windows Forms 应用程序中实现 Syncfusion 子弹图控件的专业指南。子弹图是一种紧凑且节省空间的数据可视化控件，专为仪表板设计，可替代传统仪表和计量表。它会在定性性能范围内显示主要度量（突出显示的度量）与目标（比较度量）的对比。

何时使用此技能

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

• 在紧凑的仪表板布局中显示 KPI（关键绩效指标）
• 展示当前绩效与目标的对比（实际值与目标值）
• 使用性能范围（差、满意、良好）可视化数据
• 创建收入分析或支出跟踪可视化
• 使用节省空间的替代方案取代传统仪表和计量表
• 将实际值与基准或目标进行比较
• 构建需要高信息密度的高管仪表板
• 实现年初至今（YTD）指标可视化

组件概述

子弹图包含：

• 突出显示的度量：显示当前值的主要数据条（例如，实际收入）
• 比较度量：显示目标或基准的目标线（例如，目标收入）
• 定性范围：指示性能等级的背景色带（例如，差、满意、良好）
• 定量刻度：带有刻度线和标签的轴，用于显示数值
• 标题：描述图表内容的标签

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 程序集部署和 NuGet 包安装
• 以编程方式在代码中创建子弹图
• 使用 Syncfusion Reference Manager 集成 Visual Studio
• 基本初始化和首个可运行示例
• 所需命名空间和程序集

度量（突出显示和比较）

📄 阅读： references/measures.md

• 突出显示的度量：主要数据条配置
• 自定义突出显示的度量（颜色、厚度）
• 比较度量：目标线配置
• 自定义比较度量（符号颜色、厚度）
• 视觉层级和位置

定性范围

📄 阅读： references/qualitative-ranges.md

• 添加和配置定性范围集合
• 范围属性（RangeEnd、RangeStroke、RangeCaption）
• 自定义范围大小和不透明度
• 将范围颜色绑定到刻度线和标签
• 性能指示器模式（良好、满意、差）

刻度线

📄 阅读： references/scale-and-ticks.md

• 主刻度线和次刻度线配置
• 自定义刻度线（笔触、大小、粗细）
• 刻度线位置（Above、Below、Cross）
• Interval 和 MinorTicksPerInterval 设置
• 视觉自定义示例

刻度标签

📄 阅读： references/scale-labels.md

• 标签属性和数值
• 自定义标签（字体大小、颜色、偏移量）
• 标签格式模式（LabelFormat）
• 标签位置（Above、Below）

布局和方向

📄 阅读： references/layout-and-orientation.md

• 方向（Horizontal、Vertical）
• 流向（Forward、Backward）
• 标题及其位置（Near、Far）
• 自定义定量刻度长度
• 布局属性和停靠

快速入门示例

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

常见模式

收入跟踪仪表板

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

垂直 KPI 显示

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;

使用自定义颜色设置样式的子弹图

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;

仪表板中的多个子弹图

// 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]);
}

关键属性参考

度量值

属性	类型	描述
FeaturedMeasure	double	要显示的主要值（当前值／实际值）
FeaturedMeasureBarStroke	Color	主要度量值条的颜色
FeaturedMeasureBarStrokeThickness	int	主要度量值条的粗细
ComparativeMeasure	double	目标值或基准值
ComparativeMeasureSymbolStroke	Color	比较度量值线的颜色
ComparativeMeasureSymbolStrokeThickness	int	比较度量值线的粗细

刻度

属性	类型	描述
Minimum	double	刻度的起始值
Maximum	double	刻度的结束值
Interval	double	主刻度之间的间距
MinorTicksPerInterval	int	每两个主刻度之间的小刻度数

布局

属性	类型	描述
Orientation	Orientation	水平或垂直显示
FlowDirection	BulletGraphFlowDirection	正向或反向流动
Caption	string	描述此指标的标签
CaptionPosition	BulletGraphCaptionPosition	标签靠近或远离的位置

范围

属性	类型	描述
QualitativeRanges	QualitativeRangeCollection	定性范围对象的集合
QualitativeRangesSize	int	范围带的宽度／高度

常见用例

1. 高管仪表板：在紧凑空间中显示多个 KPI
2. 财务报告：跟踪收入、利润和支出
3. 销售业绩：可视化配额完成情况
4. 客户指标：满意度评分、客户留存率
5. 运营 KPI：效率、吞吐量、质量指标
6. 项目管理：预算与实际情况对比、进度表现
7. 制造业：生产目标、缺陷率、利用率