syncfusion-angular-bullet-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Bullet Chart

实现Syncfusion Angular Bullet Chart

When to Use This Skill

适用场景

Use this skill when you need to:

Create a Bullet Chart component in an Angular application
Display performance data with actual vs target comparisons
Define and customize quality ranges (good, satisfactory, poor)
Customize axes, labels, and data visualization elements
Add accessibility features and keyboard navigation
Configure tooltips, data labels, and animations
Change chart orientation or apply themes

当你需要以下功能时可使用本技能：

在Angular应用中创建Bullet Chart组件
展示包含实际值与目标值对比的性能数据
定义并自定义质量范围（良好、满意、较差）
自定义坐标轴、标签和数据可视化元素
添加无障碍功能和键盘导航
配置工具提示、数据标签和动画效果
更改图表方向或应用主题

Component Overview

组件概述

The Syncfusion Angular Bullet Chart is a specialized data visualization component designed for comparing actual values against target values. It's ideal for displaying performance metrics, progress tracking, and goal achievement visualization. The component displays:

Value Bar (Actual Bar): The primary data measurement (feature measure)
Target Bar (Comparative Bar): The goal or benchmark value
Ranges: Color-coded zones representing quality levels (Good, Satisfactory, Poor)
Axis: Configurable scale for data values
Labels & Tooltips: Additional context and information on hover

Syncfusion Angular Bullet Chart是一款专门用于对比实际值与目标值的数据可视化组件。它非常适合展示性能指标、进度追踪和目标达成情况可视化。该组件包含以下元素：

值条（实际值条）：主要数据度量（特征度量）
目标条（对比条）：目标或基准值
范围：代表质量等级（良好、满意、较差）的彩色区域
坐标轴：可配置的数据值刻度
标签与工具提示：悬停时显示的额外上下文信息

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation and package setup (
```
@syncfusion/ej2-angular-charts
```
)
Basic Bullet Chart initialization
Angular CLI setup for Angular 21+
Standalone component architecture
Module injection for features (tooltips, etc.)
Adding data source and basic configuration

📄 阅读： references/getting-started.md

安装与包设置（
```
@syncfusion/ej2-angular-charts
```
）
基础Bullet Chart初始化
适用于Angular 21+的Angular CLI设置
独立组件架构
功能模块注入（如工具提示等）
添加数据源与基础配置

Data Binding and Sources

数据绑定与数据源

📄 Read: references/data-binding.md

Local data binding for static datasets
Remote data binding for dynamic data
Data source structure and field mapping
Mapping valueField and targetField
Dynamic data updates

📄 阅读： references/data-binding.md

静态数据集的本地数据绑定
动态数据的远程数据绑定
数据源结构与字段映射
valueField和targetField的映射
动态数据更新

Axes and Ranges Configuration

坐标轴与范围配置

📄 Read: references/axes-and-ranges.md

Major and minor tick customization
Tick placement (inside/outside)
Label formatting (number, percentage, currency)
Axis label positioning and customization
Category labels and custom label styles
Opposed position for right-aligned axes
Range definition and color customization
Quality range visualization (Good, Satisfactory, Poor)

📄 阅读： references/axes-and-ranges.md

主刻度与次刻度自定义
刻度位置（内部/外部）
标签格式化（数字、百分比、货币）
坐标轴标签位置与自定义
分类标签与自定义标签样式
右对齐坐标轴的反向位置设置
范围定义与颜色自定义
质量范围可视化（良好、满意、较差）

Visual Elements and Data Display

视觉元素与数据展示

📄 Read: references/visual-elements.md

Value bar styling and shape customization (Rect, Dot)
Border and fill customization for actual bars
Target bar types (Circle, Cross, Rect)
Target bar color and width customization
Data labels configuration and styling
Tooltip setup and customization
Tooltip templates with custom HTML
Title and subtitle positioning
Chart dimensions (pixels, percentage)

📄 阅读： references/visual-elements.md

值条样式与形状自定义（矩形、圆点）
实际值条的边框与填充自定义
目标条类型（圆形、十字形、矩形）
目标条颜色与宽度自定义
数据标签配置与样式设置
工具提示设置与自定义
包含自定义HTML的工具提示模板
标题与副标题位置设置
图表尺寸（像素、百分比）

Customization and Styling

自定义与样式设置

📄 Read: references/customization.md

Horizontal vs Vertical orientation
Right-to-left (RTL) support
Animation configuration (duration, delay)
Theme selection and application
CSS customization approaches
Responsive design patterns

📄 阅读： references/customization.md

水平与垂直方向切换
从右到左（RTL）支持
动画配置（时长、延迟）
主题选择与应用
CSS自定义方法
响应式设计模式

Accessibility Features

无障碍功能

📄 Read: references/accessibility.md

WCAG 2.2, Section 508, and ADA compliance
Keyboard navigation (Tab, Shift+Tab, Ctrl+P)
Screen reader support and WAI-ARIA attributes
Color contrast standards
Mobile device support

📄 阅读： references/accessibility.md

符合WCAG 2.2、Section 508和ADA标准
键盘导航（Tab、Shift+Tab、Ctrl+P）
屏幕阅读器支持与WAI-ARIA属性
颜色对比度标准
移动设备支持

Quick Start Example

快速入门示例

Here's a minimal working example:

typescript

import { Component, OnInit } from '@angular/core';
import { BulletChartModule, BulletTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-bulletchart 
        [dataSource]='data' 
        valueField='value' 
        targetField='target'
        [tooltip]='{ enable: true }'
        title='Sales Performance'
        [ranges]='ranges'>
    </ejs-bulletchart>`,
    providers: [BulletTooltipService]
})
export class AppComponent implements OnInit {
    public data: any;
    public ranges: any;

    ngOnInit(): void {
        this.data = [
            { value: 100, target: 80 },
            { value: 200, target: 180 }
        ];
        
        this.ranges = [
            { end: 50, color: '#ffe0b2', opacity: 0.6 },    // Poor
            { end: 100, color: '#fff9c4', opacity: 0.6 },   // Satisfactory
            { end: 150, color: '#c8e6c9', opacity: 0.6 }    // Good
        ];
    }
}

以下是一个最简可用示例：

typescript

import { Component, OnInit } from '@angular/core';
import { BulletChartModule, BulletTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
    imports: [BulletChartModule],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-bulletchart 
        [dataSource]='data' 
        valueField='value' 
        targetField='target'
        [tooltip]='{ enable: true }'
        title='Sales Performance'
        [ranges]='ranges'>
    </ejs-bulletchart>`,
    providers: [BulletTooltipService]
})
export class AppComponent implements OnInit {
    public data: any;
    public ranges: any;

    ngOnInit(): void {
        this.data = [
            { value: 100, target: 80 },
            { value: 200, target: 180 }
        ];
        
        this.ranges = [
            { end: 50, color: '#ffe0b2', opacity: 0.6 },    // Poor
            { end: 100, color: '#fff9c4', opacity: 0.6 },   // Satisfactory
            { end: 150, color: '#c8e6c9', opacity: 0.6 }    // Good
        ];
    }
}

Common Patterns

常见模式

Pattern 1: Sales Performance Dashboard

模式1：销售业绩仪表盘

When displaying sales metrics against targets:

typescript

data = [
    { category: 'Q1', value: 25000, target: 30000 },
    { category: 'Q2', value: 28000, target: 30000 },
    { category: 'Q3', value: 35000, target: 30000 }
];

ranges = [
    { end: 20000, color: '#ffe0b2' },      // Below Target
    { end: 30000, color: '#fff9c4' },      // On Target
    { end: 40000, color: '#c8e6c9' }       // Above Target
];

展示销售指标与目标对比时：

typescript

data = [
    { category: 'Q1', value: 25000, target: 30000 },
    { category: 'Q2', value: 28000, target: 30000 },
    { category: 'Q3', value: 35000, target: 30000 }
];

ranges = [
    { end: 20000, color: '#ffe0b2' },      // Below Target
    { end: 30000, color: '#fff9c4' },      // On Target
    { end: 40000, color: '#c8e6c9' }       // Above Target
];

Pattern 2: Employee Performance Ratings

模式2：员工绩效评分

When comparing individual performance scores:

typescript

data = [
    { name: 'Alice', value: 85, target: 80 },
    { name: 'Bob', value: 72, target: 80 },
    { name: 'Charlie', value: 90, target: 80 }
];

对比个人绩效得分时：

typescript

data = [
    { name: 'Alice', value: 85, target: 80 },
    { name: 'Bob', value: 72, target: 80 },
    { name: 'Charlie', value: 90, target: 80 }
];

Pattern 3: KPI Tracking with Orientation

模式3：带方向设置的KPI追踪

When space is limited or vertical display is preferred:

typescript

<ejs-bulletchart orientation='Vertical' ...></ejs-bulletchart>

空间有限或偏好垂直展示时：

typescript

<ejs-bulletchart orientation='Vertical' ...></ejs-bulletchart>

Key Properties

关键属性

Property	Type	Purpose
`dataSource`	Array	Array of data objects containing value and target fields
`valueField`	String	Property name for actual/feature measure value
`targetField`	String	Property name for target/comparative measure value
`ranges`	Array	Array of range objects defining quality zones
`title`	String	Title displayed at the top of chart
`subtitle`	String	Subtitle for additional context
`orientation`	String	'Horizontal' (default) or 'Vertical'
`tooltip`	Object	Configuration for hover tooltips
`dataLabel`	Object	Configuration for value labels
`type`	String	Shape of value bar: 'Rect' (default) or 'Dot'
`targetTypes`	String	Shape of target bar: 'Rect', 'Circle', or 'Cross'
`width`	String/Number	Chart width in pixels or percentage
`height`	String/Number	Chart height in pixels or percentage
`theme`	String	Theme name (Material, Fabric, Bootstrap, Tailwind, etc.)
`enableRtl`	Boolean	Enable right-to-left rendering
`animation`	Object	Configuration for entrance animations

属性	类型	用途
`dataSource`	Array	包含value和target字段的数据对象数组
`valueField`	String	实际值/特征度量值的属性名
`targetField`	String	目标值/对比度量值的属性名
`ranges`	Array	定义质量区域的范围对象数组
`title`	String	图表顶部显示的标题
`subtitle`	String	提供额外上下文的副标题
`orientation`	String	'Horizontal'（默认）或 'Vertical'
`tooltip`	Object	悬停工具提示的配置
`dataLabel`	Object	值标签的配置
`type`	String	值条形状：'Rect'（默认）或 'Dot'
`targetTypes`	String	目标条形状：'Rect'、'Circle' 或 'Cross'
`width`	String/Number	图表宽度（像素或百分比）
`height`	String/Number	图表高度（像素或百分比）
`theme`	String	主题名称（Material、Fabric、Bootstrap、Tailwind等）
`enableRtl`	Boolean	启用从右到左渲染
`animation`	Object	入场动画的配置

Common Use Cases

常见使用场景

API Reference

API参考

A complete API reference for the Syncfusion Angular

BulletChart

is available in the

references

folder. It lists component properties, methods, events, and usage notes that match the official API docs.

Read the full API reference here: references/api-reference.md

Sales Performance Tracking: Display actual sales vs target with quality zones
Quality Metrics: Monitor production quality against benchmarks
HR Metrics: Track employee performance against goals
Budget Analysis: Compare actual spending vs budgeted amounts
Learning Progress: Show student progress toward learning objectives
Health Metrics: Display health indicators against recommended values
Project Status: Track project metrics against planned targets

Next Steps: Choose the reference file that matches your immediate need based on the guidance above, or start with getting-started.md if this is your first time using Bullet Chart.

Syncfusion Angular

BulletChart

的完整API参考可在

references

文件夹中获取。其中列出了组件属性、方法、事件及使用说明，与官方API文档一致。

阅读完整API参考：references/api-reference.md

销售业绩追踪：展示实际销售额与目标值及质量区域对比
质量指标监控：对照基准监控生产质量
HR指标：追踪员工绩效与目标的对比情况
预算分析：对比实际支出与预算金额
学习进度展示：显示学生学习目标的完成进度
健康指标展示：展示健康指标与推荐值的对比
项目状态追踪：追踪项目指标与计划目标的对比情况

下一步： 根据上述指南选择符合你当前需求的参考文件，如果你是首次使用Bullet Chart，请从getting-started.md开始。