syncfusion-wpf-bullet-graph（同步融合 WPF 项目符号图） Skills下载安装命令和教程

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：syncfusion-wpf-bullet-graph（同步融合 WPF 项目符号图）
来源仓库：https://github.com/syncfusion/wpf-ui-components-skills
仓库路径：skills/syncfusion-wpf-bullet-graph
安装命令：
npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-bullet-graph
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

skills.shnpx skills

npx skills add https://github.com/syncfusion/wpf-ui-components-skills --skill syncfusion-wpf-bullet-graph

简介

Syncfusion WPF 项目符号图组件，用于对比型数据指标展示。

适用于绩效分析与目标达成度可视化场景。syncfusion-wpf-bullet-graph 属于前端设计类 Skill，可作为该场景下的辅助能力补充。
通过 GitHub 仓库安装，兼容 Codex、Claude 等宿主环境。
使用前应评估其对多数据集的支持与缩放性能。
建议参考原始 README 了解基准线与范围线配置方法。

SKILL.md

Implementing Bullet Graphs in WPF

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.

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

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

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

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

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

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

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

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

Quick Start Example

Basic Bullet Graph in 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>

Basic Bullet Graph in 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);

Common Patterns

Revenue Dashboard with Caption

<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

<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

<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

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

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

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

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)

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

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Codex

33.53%

按下载量换算112

Claude

32.25%

按下载量换算107

Cursor

19.43%

按下载量换算65

Gemini CLI

9.72%

按下载量换算32

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API；具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/syncfusion/wpf-ui-components-skills

SKILL.md 来源

github.com

/syncfusion/wpf-ui-components-skills/tree/main/skills/syncfusion-wpf-bullet-graph

skills-sh

skills.sh

/syncfusion/wpf-ui-components-skills/syncfusion-wpf-bullet-graph

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

syncfusion-wpf-breadcrumb（同步融合 WPF 面包屑）

syncfusion-wpf-breadcrumb 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

下一个 Skill

syncfusion-wpf-busy-indicator（同步融合 wpf 繁忙指示器）

syncfusion-wpf-busy-indicator 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。