syncfusion-blazor-bullet-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Bullet Charts

实现Bullet Chart

NuGet:

Syncfusion.Blazor.Charts

Syncfusion.Blazor.Themes

(or

Syncfusion.Blazor.BulletChart

for individual package) Namespace:

Syncfusion.Blazor.Charts

A comprehensive skill for implementing Syncfusion Blazor Bullet Chart components for KPI and performance visualization. The Bullet Chart is a variation of bar charts designed specifically for displaying key performance indicators with actual values, target markers, and qualitative ranges in a compact space.

NuGet:

Syncfusion.Blazor.Charts

Syncfusion.Blazor.Themes

（或单独使用

Syncfusion.Blazor.BulletChart

包） 命名空间:

Syncfusion.Blazor.Charts

这是一份关于在Blazor中实现Syncfusion Blazor Bullet Chart组件以进行KPI和性能可视化的完整指南。Bullet Chart是条形图的一种变体，专为在紧凑空间内展示关键绩效指标（KPI）而设计，包含实际值、目标标记和定性区间。

When to Use This Skill

适用场景

Use this skill immediately when you need to:

Display KPI (Key Performance Indicator) dashboards
Show actual performance vs target/goal comparisons
Visualize metrics with qualitative ranges (Good, Average, Poor)
Create compact performance indicators for dashboards
Track sales targets, revenue goals, or quota achievements
Display feature measures against comparative measures
Build executive dashboards with multiple KPI metrics
Show progress toward goals with context zones
Compare current performance against benchmarks
Visualize performance metrics in limited dashboard space
Create data-dense visualizations for business intelligence
Display multiple performance metrics in vertical/horizontal layouts
Build responsive KPI cards or widgets for Blazor Server, WebAssembly, or Web App

当你需要以下功能时，立即使用本技能：

展示KPI（关键绩效指标）仪表盘
呈现实际业绩与目标/预期的对比
可视化带有定性区间（优秀、中等、较差）的指标
为仪表盘创建紧凑的绩效指示器
追踪销售目标、营收目标或配额完成情况
展示功能指标与对比指标的对比
构建包含多个KPI指标的高管仪表盘
结合情境区域展示目标达成进度
将当前业绩与基准进行对比
在有限的仪表盘空间内可视化绩效指标
为商业智能创建数据密集型可视化效果
在垂直/水平布局中展示多个绩效指标
为Blazor Server、WebAssembly或Web App构建响应式KPI卡片或组件

Component Overview

组件概述

The Syncfusion Blazor Bullet Chart (

SfBulletChart

) is a specialized charting component optimized for KPI visualization. It presents:

Actual Bar (Feature Measure): Primary data value displayed as a horizontal/vertical bar
Target Bar (Comparative Measure): Goal marker displayed as a perpendicular line or shape
Qualitative Ranges: Background zones representing performance levels (Poor, Satisfactory, Good)
Compact Design: Space-efficient layout ideal for dashboards
Multiple Layouts: Single or multiple bullet charts with category grouping
Customization: Extensive styling, theming, and formatting options

Key Characteristics:

Bar Types: Rect (default) or Dot for actual values
Target Shapes: Rect, Circle, or Cross markers
Orientation: Horizontal (default) or Vertical layouts
Data Binding: Single point, multiple series, or category-based data
Interactive: Tooltips, data labels, legends, and events
Accessible: WCAG compliant with keyboard navigation

Syncfusion Blazor Bullet Chart（

SfBulletChart

）是一款针对KPI可视化优化的专业图表组件。它提供：

实际条形（特征指标）: 以水平/垂直条形展示的主要数据值
目标标记（对比指标）: 以垂直线或形状展示的目标标记
定性区间: 代表绩效水平（较差、满意、优秀）的背景区域
紧凑设计: 适合仪表盘的高效空间布局
多种布局: 单个或多个带分类分组的Bullet Chart
自定义功能: 丰富的样式、主题和格式化选项

核心特性:

条形类型: 矩形（默认）或点状的实际值展示
目标形状: 矩形、圆形或十字形标记
方向: 水平（默认）或垂直布局
数据绑定: 单点数据、多系列数据或基于分类的数据
交互性: 工具提示、数据标签、图例和事件
可访问性: 符合WCAG标准，支持键盘导航

Documentation and Navigation Guide

文档与导航指南

API Reference

API参考

A concise summary of the key API surface for

SfBulletChart<TValue>

— see

references/api-reference.md

for the full reference and examples.

SfBulletChart<TValue> — Key Parameters

DataSource: object — Data collection (List, IEnumerable, or remote
```
DataManager
```
).
ValueField: string — Property name for the actual (feature) value.
TargetField: string — Property name for the target/comparative value.
CategoryField: string — Property name for category grouping (when multiple bullets are shown).
Minimum / Maximum / Interval: double — Axis scale configuration.
Orientation:
```
OrientationType
```
—
```
Horizontal
```
or
```
Vertical
```
.
Type:
```
FeatureType
```
— Actual bar rendering (
```
Rect
```
or
```
Dot
```
).
TargetTypes:
```
List<TargetType>
```
— Marker shapes for targets (e.g.,
```
Rect
```
,
```
Circle
```
,
```
Cross
```
).
Width / Height / Title / Theme: visual settings to control layout and appearance.

Core Child Components

BulletChartRange: defines qualitative background ranges (
```
End
```
,
```
Color
```
,
```
Opacity
```
).
BulletChartRangeCollection: container for multiple
```
BulletChartRange
```
entries.
BulletChartDataLabel: data label options (
```
Enable
```
,
```
Template
```
,
```
TextStyle
```
).
BulletChartTooltip: tooltip configuration (
```
Enable
```
,
```
Template
```
,
```
BulletChartTooltipTextStyle
```
).

Appearance & Layout

Border / Margin / MajorTickLines / MinorTickLines / CategoryLabelStyle: axis, tick and spacing controls.
LegendSettings / LegendLocation / LegendTextStyle: legend appearance when using categories or multiple bullets.

Events

Loaded / Resized: lifecycle events to detect initialization and size changes.
TooltipRender / LabelRender / LegendRender / PointClick: customization hooks for runtime interaction.

Important Enums

OrientationType:
```
Horizontal
```
|
```
Vertical
```
.
TargetType:
```
Rect
```
|
```
Circle
```
|
```
Cross
```
.
FeatureType:
```
Rect
```
|
```
Dot
```
.

For full API details, method signatures, event argument classes, and quick examples, consult

references/api-reference.md

以下是

SfBulletChart<TValue>

的核心API汇总 — 完整参考和示例请查看

references/api-reference.md

。

SfBulletChart<TValue> — 关键参数

DataSource: object — 数据集合（List、IEnumerable或远程
```
DataManager
```
）。
ValueField: string — 实际（特征）值的属性名称。
TargetField: string — 目标/对比值的属性名称。
CategoryField: string — 分类分组的属性名称（展示多个Bullet Chart时使用）。
Minimum / Maximum / Interval: double — 轴刻度配置。
Orientation:
```
OrientationType
```
—
```
Horizontal
```
或
```
Vertical
```
。
Type:
```
FeatureType
```
— 实际条形的渲染类型（
```
Rect
```
或
```
Dot
```
）。
TargetTypes:
```
List<TargetType>
```
— 目标标记的形状（例如
```
Rect
```
、
```
Circle
```
、
```
Cross
```
）。
Width / Height / Title / Theme: 控制布局和外观的视觉设置。

核心子组件

BulletChartRange: 定义定性背景区间（
```
End
```
、
```
Color
```
、
```
Opacity
```
）。
BulletChartRangeCollection: 多个
```
BulletChartRange
```
条目的容器。
BulletChartDataLabel: 数据标签选项（
```
Enable
```
、
```
Template
```
、
```
TextStyle
```
）。
BulletChartTooltip: 工具提示配置（
```
Enable
```
、
```
Template
```
、
```
BulletChartTooltipTextStyle
```
）。

外观与布局

Border / Margin / MajorTickLines / MinorTickLines / CategoryLabelStyle: 轴、刻度和间距控制。
LegendSettings / LegendLocation / LegendTextStyle: 使用分类或多个Bullet Chart时的图例外观。

事件

Loaded / Resized: 检测初始化和尺寸变化的生命周期事件。
TooltipRender / LabelRender / LegendRender / PointClick: 运行时交互的自定义钩子。

重要枚举

OrientationType:
```
Horizontal
```
|
```
Vertical
```
。
TargetType:
```
Rect
```
|
```
Circle
```
|
```
Cross
```
。
FeatureType:
```
Rect
```
|
```
Dot
```
。

如需完整的API细节、方法签名、事件参数类和快速示例，请查阅

references/api-reference.md

。

Getting Started

快速入门

📄 Read: references/getting-started.md

Start here for installation, setup, and your first bullet chart. Covers:

Installing Syncfusion.Blazor.BulletChart NuGet package
Blazor Server, WebAssembly, and Web App setup
Service registration and theme configuration
Basic SfBulletChart implementation with sample data
Project structure and script references
Troubleshooting common setup issues

📄 阅读: references/getting-started.md

从这里开始学习安装、设置和创建你的第一个Bullet Chart。涵盖内容：

安装Syncfusion.Blazor.BulletChart NuGet包
Blazor Server、WebAssembly和Web App的设置
服务注册和主题配置
使用示例数据实现基础SfBulletChart
项目结构和脚本引用
常见设置问题的故障排除

Core Chart Elements

核心图表元素

Actual and Target Bars

实际与目标条形

📄 Read: references/actual-target-bars.md

Learn about the two primary chart elements:

Actual Bar (Feature Measure): ValueField mapping, Rect vs Dot types, styling
Target Bar (Comparative Measure): TargetField mapping, Circle/Cross/Rect shapes, multiple targets
Color customization for both bars
Width and height configuration
Best practices for visual hierarchy

📄 阅读: references/actual-target-bars.md

了解两个主要图表元素：

实际条形（特征指标）: ValueField映射、矩形与点状类型、样式设置
目标标记（对比指标）: TargetField映射、圆形/十字形/矩形形状、多目标设置
两种条形的颜色自定义
宽度和高度配置
视觉层次的最佳实践

Qualitative Ranges

定性区间

📄 Read: references/ranges.md

Configure background ranges that define performance zones:

Range boundaries using End property
Color and opacity customization
Good/Satisfactory/Poor zone patterns
Multiple range configurations
Visual design best practices

📄 阅读: references/ranges.md

配置定义绩效区域的背景区间：

使用End属性设置区间边界
颜色和透明度自定义
优秀/满意/较差区域的模式
多区间配置
视觉设计的最佳实践

Data Configuration

数据配置

Data Binding

数据绑定

📄 Read: references/data-binding.md

Configure data sources for bullet charts:

Single data point for simple KPIs
Multiple data points with categories (vertical layout)
CategoryField, ValueField, TargetField mapping
Local data sources (List, Array, ExpandoObject)
Remote data binding with SfDataManager
Dynamic data updates and refresh patterns

📄 阅读: references/data-binding.md

为Bullet Chart配置数据源：

用于简单KPI的单点数据
带分类的多点数据（垂直布局）
CategoryField、ValueField、TargetField的映射
本地数据源（List、Array、ExpandoObject）
使用SfDataManager进行远程数据绑定
动态数据更新和刷新模式

Customization and Styling

自定义与样式设置

Axis Customization

轴自定义

📄 Read: references/axis-customization.md

Customize the quantitative scale:

Minimum, Maximum, Interval properties
Horizontal vs Vertical orientation
Major and minor tick configuration
Axis label formatting and rotation
Opposite position for labels
RTL (Right-to-Left) support

📄 阅读: references/axis-customization.md

自定义定量刻度：

Minimum、Maximum、Interval属性
水平与垂直方向
主刻度和次刻度配置
轴标签的格式化和旋转
标签的反向位置
RTL（从右到左）支持

Visual Customization

视觉自定义

📄 Read: references/visual-customization.md

Control appearance, themes, and layout:

Chart dimensions (Width, Height, Container)
Theme selection (Material, Bootstrap, Fluent, Tailwind, Fabric, Highcontrast)
Color palette customization
Title and subtitle configuration
Border, margin, and padding settings
Responsive design patterns

📄 阅读: references/visual-customization.md

控制外观、主题和布局：

图表尺寸（Width、Height、Container）
主题选择（Material、Bootstrap、Fluent、Tailwind、Fabric、Highcontrast）
调色板自定义
标题和副标题配置
边框、边距和内边距设置
响应式设计模式

Additional Features

附加功能

Data Labels, Tooltips, and Legend

数据标签、工具提示和图例

📄 Read: references/data-labels-tooltips-legend.md

Enhance data visibility and interaction:

Data Labels: Enable, format, position, and template options
Tooltips: Default and custom templates, format strings
Legend: Position, alignment, custom text, toggle visibility

📄 阅读: references/data-labels-tooltips-legend.md

增强数据可见性和交互性：

数据标签: 启用、格式化、位置和模板选项
工具提示: 默认和自定义模板、格式化字符串
图例: 位置、对齐方式、自定义文本、可见性切换

Events and Accessibility

事件与可访问性

📄 Read: references/events-accessibility.md

Handle user interactions and ensure accessibility:

Events: OnLoad, OnChartMouseClick, OnTooltipRender, OnLegendRender
Accessibility: WCAG compliance, keyboard navigation, screen readers, high contrast themes
ARIA attributes and testing checklist

📄 阅读: references/events-accessibility.md

处理用户交互并确保可访问性：

事件: OnLoad、OnChartMouseClick、OnTooltipRender、OnLegendRender
可访问性: WCAG合规、键盘导航、屏幕阅读器、高对比度主题
ARIA属性和测试清单

Quick Start Example

快速入门示例

Here's a minimal bullet chart showing revenue performance:

razor

@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@RevenueData" 
               ValueField="ActualRevenue" 
               TargetField="TargetRevenue" 
               Minimum="0" 
               Maximum="300" 
               Interval="50" 
               Title="Revenue (in thousands)">
    <BulletChartRangeCollection>
        <BulletChartRange End="150" Color="#d32f2f"></BulletChartRange>
        <BulletChartRange End="250" Color="#ffa726"></BulletChartRange>
        <BulletChartRange End="300" Color="#66bb6a"></BulletChartRange>
    </BulletChartRangeCollection>
</SfBulletChart>

@code {
    public class RevenueMetric
    {
        public double ActualRevenue { get; set; }
        public double TargetRevenue { get; set; }
    }
    
    public List<RevenueMetric> RevenueData = new List<RevenueMetric>
    {
        new RevenueMetric { ActualRevenue = 270, TargetRevenue = 250 }
    };
}

What this creates:

Actual bar showing $270K revenue
Target marker at $250K goal
Three qualitative ranges: Poor (0-150), Satisfactory (150-250), Good (250-300)
Horizontal layout with title

以下是展示营收绩效的极简Bullet Chart：

razor

@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@RevenueData" 
               ValueField="ActualRevenue" 
               TargetField="TargetRevenue" 
               Minimum="0" 
               Maximum="300" 
               Interval="50" 
               Title="Revenue (in thousands)">
    <BulletChartRangeCollection>
        <BulletChartRange End="150" Color="#d32f2f"></BulletChartRange>
        <BulletChartRange End="250" Color="#ffa726"></BulletChartRange>
        <BulletChartRange End="300" Color="#66bb6a"></BulletChartRange>
    </BulletChartRangeCollection>
</SfBulletChart>

@code {
    public class RevenueMetric
    {
        public double ActualRevenue { get; set; }
        public double TargetRevenue { get; set; }
    }
    
    public List<RevenueMetric> RevenueData = new List<RevenueMetric>
    {
        new RevenueMetric { ActualRevenue = 270, TargetRevenue = 250 }
    };
}

实现效果:

显示27万美元营收的实际条形
标记25万美元目标的目标标记
三个定性区间：较差（0-150）、满意（150-250）、优秀（250-300）
带标题的水平布局

Common Use Cases

常见用例

1. KPI Dashboard with Multiple Metrics

1. 包含多个指标的KPI仪表盘

Display multiple performance indicators in a vertical layout:

razor

@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@PerformanceData" 
               CategoryField="Metric" 
               ValueField="Actual" 
               TargetField="Target" 
               Orientation="OrientationType.Vertical"
               Height="400"
               Minimum="0" 
               Maximum="100">
    <BulletChartRangeCollection>
        <BulletChartRange End="35" Color="#d32f2f"></BulletChartRange>
        <BulletChartRange End="70" Color="#ffa726"></BulletChartRange>
        <BulletChartRange End="100" Color="#66bb6a"></BulletChartRange>
    </BulletChartRangeCollection>
</SfBulletChart>

@code {
    public class KPIMetric
    {
        public string Metric { get; set; }
        public double Actual { get; set; }
        public double Target { get; set; }
    }
    
    public List<KPIMetric> PerformanceData = new List<KPIMetric>
    {
        new KPIMetric { Metric = "Revenue", Actual = 85, Target = 80 },
        new KPIMetric { Metric = "Profit", Actual = 65, Target = 75 },
        new KPIMetric { Metric = "Market Share", Actual = 45, Target = 60 },
        new KPIMetric { Metric = "Customer Satisfaction", Actual = 90, Target = 85 }
    };
}

在垂直布局中展示多个绩效指标：

razor

@using Syncfusion.Blazor.Charts

<SfBulletChart DataSource="@PerformanceData" 
               CategoryField="Metric" 
               ValueField="Actual" 
               TargetField="Target" 
               Orientation="OrientationType.Vertical"
               Height="400"
               Minimum="0" 
               Maximum="100">
    <BulletChartRangeCollection>
        <BulletChartRange End="35" Color="#d32f2f"></BulletChartRange>
        <BulletChartRange End="70" Color="#ffa726"></BulletChartRange>
        <BulletChartRange End="100" Color="#66bb6a"></BulletChartRange>
    </BulletChartRangeCollection>
</SfBulletChart>

@code {
    public class KPIMetric
    {
        public string Metric { get; set; }
        public double Actual { get; set; }
        public double Target { get; set; }
    }
    
    public List<KPIMetric> PerformanceData = new List<KPIMetric>
    {
        new KPIMetric { Metric = "Revenue", Actual = 85, Target = 80 },
        new KPIMetric { Metric = "Profit", Actual = 65, Target = 75 },
        new KPIMetric { Metric = "Market Share", Actual = 45, Target = 60 },
        new KPIMetric { Metric = "Customer Satisfaction", Actual = 90, Target = 85 }
    };
}

2. Sales Target Tracker with Custom Styling

2. 自定义样式的销售目标追踪器

Track sales performance with custom colors and target marker:

razor

@using Syncfusion.Blazor.Charts
<SfBulletChart DataSource="@SalesData" 
               ValueField="Sales" 
               TargetField="Quota" 
               TargetTypes="new List<Syncfusion.Blazor.Charts.TargetType> { Syncfusion.Blazor.Charts.TargetType.Circle }"
               Type="FeatureType.Rect"
               Minimum="0" 
               Maximum="500" 
               Interval="100"
               Title="Q1 Sales Performance">
    <BulletChartRangeCollection>
        <BulletChartRange End="200" Color="#ff5252" Opacity="0.5"></BulletChartRange>
        <BulletChartRange End="350" Color="#ffeb3b" Opacity="0.5"></BulletChartRange>
        <BulletChartRange End="500" Color="#4caf50" Opacity="0.5"></BulletChartRange>
    </BulletChartRangeCollection>
    <BulletChartTooltip TValue="SalesMetric" Enable="true">
        <BulletChartTooltipTextStyle Color="white" FontWeight="600"></BulletChartTooltipTextStyle>
    </BulletChartTooltip>
</SfBulletChart>

@code {
    public class SalesMetric
    {
        public double Sales { get; set; }
        public double Quota { get; set; }
    }
    
    public List<SalesMetric> SalesData = new List<SalesMetric>
    {
        new SalesMetric { Sales = 380, Quota = 350 }
    };
}

使用自定义颜色和目标标记追踪销售业绩：

razor

@using Syncfusion.Blazor.Charts
<SfBulletChart DataSource="@SalesData" 
               ValueField="Sales" 
               TargetField="Quota" 
               TargetTypes="new List<Syncfusion.Blazor.Charts.TargetType> { Syncfusion.Blazor.Charts.TargetType.Circle }"
               Type="FeatureType.Rect"
               Minimum="0" 
               Maximum="500" 
               Interval="100"
               Title="Q1 Sales Performance">
    <BulletChartRangeCollection>
        <BulletChartRange End="200" Color="#ff5252" Opacity="0.5"></BulletChartRange>
        <BulletChartRange End="350" Color="#ffeb3b" Opacity="0.5"></BulletChartRange>
        <BulletChartRange End="500" Color="#4caf50" Opacity="0.5"></BulletChartRange>
    </BulletChartRangeCollection>
    <BulletChartTooltip TValue="SalesMetric" Enable="true">
        <BulletChartTooltipTextStyle Color="white" FontWeight="600"></BulletChartTooltipTextStyle>
    </BulletChartTooltip>
</SfBulletChart>

@code {
    public class SalesMetric
    {
        public double Sales { get; set; }
        public double Quota { get; set; }
    }
    
    public List<SalesMetric> SalesData = new List<SalesMetric>
    {
        new SalesMetric { Sales = 380, Quota = 350 }
    };
}

3. Executive Dashboard Card with Data Labels

3. 带数据标签的高管仪表盘卡片

Compact KPI card for executive dashboards:

razor

@using Syncfusion.Blazor.Charts

<div style="width: 300px; padding: 16px; border: 1px solid #e0e0e0; border-radius: 8px;">
    <SfBulletChart DataSource="@MetricData" 
                   ValueField="Value" 
                   TargetField="Goal" 
                   Minimum="0" 
                   Maximum="100" 
                   Interval="25"
                   Width="100%"
                   Height="60"
                   Title="Customer Retention Rate">
        <BulletChartRangeCollection>
            <BulletChartRange End="60" Color="#f44336"></BulletChartRange>
            <BulletChartRange End="80" Color="#ff9800"></BulletChartRange>
            <BulletChartRange End="100" Color="#4caf50"></BulletChartRange>
        </BulletChartRangeCollection>
        <BulletChartDataLabel>
            <BulletChartDataLabelStyle Color="#FFFFFF" Opacity="1" Size="15px" FontStyle="italic"></BulletChartDataLabelStyle>
        </BulletChartDataLabel>
    </SfBulletChart>
</div>

@code {
    public class Metric
    {
        public double Value { get; set; }
        public double Goal { get; set; }
    }
    
    public List<Metric> MetricData = new List<Metric>
    {
        new Metric { Value = 92, Goal = 85 }
    };
}

用于高管仪表盘的紧凑KPI卡片：

razor

@using Syncfusion.Blazor.Charts

<div style="width: 300px; padding: 16px; border: 1px solid #e0e0e0; border-radius: 8px;">
    <SfBulletChart DataSource="@MetricData" 
                   ValueField="Value" 
                   TargetField="Goal" 
                   Minimum="0" 
                   Maximum="100" 
                   Interval="25"
                   Width="100%"
                   Height="60"
                   Title="Customer Retention Rate">
        <BulletChartRangeCollection>
            <BulletChartRange End="60" Color="#f44336"></BulletChartRange>
            <BulletChartRange End="80" Color="#ff9800"></BulletChartRange>
            <BulletChartRange End="100" Color="#4caf50"></BulletChartRange>
        </BulletChartRangeCollection>
        <BulletChartDataLabel>
            <BulletChartDataLabelStyle Color="#FFFFFF" Opacity="1" Size="15px" FontStyle="italic"></BulletChartDataLabelStyle>
        </BulletChartDataLabel>
    </SfBulletChart>
</div>

@code {
    public class Metric
    {
        public double Value { get; set; }
        public double Goal { get; set; }
    }
    
    public List<Metric> MetricData = new List<Metric>
    {
        new Metric { Value = 92, Goal = 85 }
    };
}

Key Properties Reference

关键属性参考

Essential Properties

核心属性

Property	Type	Description	Default
`DataSource`	object	Data collection for the chart	null
`ValueField`	string	Property name for actual value	null
`TargetField`	string	Property name for target value	null
`CategoryField`	string	Property for category grouping	null
`Minimum`	double	Minimum scale value	0
`Maximum`	double	Maximum scale value	100
`Interval`	double	Scale interval	10

属性	类型	描述	默认值
`DataSource`	object	图表的数据集合	null
`ValueField`	string	实际值的属性名称	null
`TargetField`	string	目标值的属性名称	null
`CategoryField`	string	分类分组的属性名称	null
`Minimum`	double	刻度最小值	0
`Maximum`	double	刻度最大值	100
`Interval`	double	刻度间隔	10

Visual Properties

视觉属性

Property	Type	Description	Default
`Type`	FeatureType	Actual bar type (Rect, Dot)	Rect
`TargetTypes`	List<TargetType>	Target marker shape	Rect
`Orientation`	OrientationType	Layout direction	Horizontal
`Width`	string	Chart width	"100%"
`Height`	string	Chart height	"126px"
`Title`	string	Chart title	""
`Theme`	ChartTheme	Visual theme	Material

属性	类型	描述	默认值
`Type`	FeatureType	实际条形类型（Rect、Dot）	Rect
`TargetTypes`	List<TargetType>	目标标记形状	Rect
`Orientation`	OrientationType	布局方向	Horizontal
`Width`	string	图表宽度	"100%"
`Height`	string	图表高度	"126px"
`Title`	string	图表标题	""
`Theme`	ChartTheme	视觉主题	Material

Data Display

数据展示

Property	Type	Description
`BulletChartRangeCollection`	Component	Qualitative ranges
`BulletChartDataLabel`	Component	Data label configuration
`BulletChartTooltip`	Component	Tooltip settings
`BulletChartLegend`	Component	Legend configuration

属性	类型	描述
`BulletChartRangeCollection`	组件	定性区间
`BulletChartDataLabel`	组件	数据标签配置
`BulletChartTooltip`	组件	工具提示设置
`BulletChartLegend`	组件	图例配置

Implementation Workflow

实现流程

When implementing a bullet chart, follow this sequence:

Start with Getting Started for installation and basic setup
Configure data binding from Data Binding for your data structure
Set up ranges using Ranges to define performance zones
Add actual and target bars from Actual and Target Bars
Customize the axis with Axis Customization for proper scaling
Apply visual styling from Visual Customization
Enhance with data labels/tooltips from Data Labels, Tooltips, and Legend
Add interactivity and accessibility using Events and Accessibility

For questions or issues, refer to the troubleshooting sections in each reference file or consult Events and Accessibility for compliance requirements.

实现Bullet Chart时，请遵循以下步骤：

从快速入门开始完成安装和基础设置
配置数据绑定参考数据绑定适配你的数据结构
设置区间使用区间定义绩效区域
添加实际与目标条形参考实际与目标条形
自定义轴使用轴自定义设置合适的刻度
应用视觉样式参考视觉自定义
添加数据标签/工具提示参考数据标签、工具提示和图例
添加交互性和可访问性使用事件与可访问性

如有疑问或问题，请参考各参考文档中的故障排除部分，或查阅事件与可访问性了解合规要求。