syncfusion-angular-bullet-chart

实现 Syncfusion Angular Bullet Chart

何时使用此技能

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

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

组件概览

Syncfusion Angular Bullet Chart 是一种专用数据可视化组件，用于比较实际值与目标值。它非常适合展示绩效指标、进度跟踪和目标达成情况。该组件显示：

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

文档与导航指南

入门

📄 阅读： references/getting-started.md

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

数据绑定与数据源

📄 阅读： references/data-binding.md

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

坐标轴和范围配置

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

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

可视元素和数据显示

📄 阅读： references/visual-elements.md

• 值条样式和形状自定义（Rect、Dot）
• 实际条的边框和填充自定义
• 目标条类型（Circle、Cross、Rect）
• 目标条颜色和宽度自定义
• 数据标签配置和样式设置
• 工具提示设置和自定义
• 使用自定义 HTML 的工具提示模板
• 标题和副标题位置
• 图表尺寸（像素、百分比）

自定义与样式

📄 阅读： references/customization.md

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

无障碍功能

📄 阅读： references/accessibility.md

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

快速入门示例

以下是一个最简可运行示例：

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

常见模式

模式 1：销售绩效仪表板

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

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
];

模式 2：员工绩效评级

比较个人绩效评分时：

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

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

空间有限或更适合垂直显示时：

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

关键属性

属性	类型	用途
dataSource	Array	包含值字段和目标字段的数据对象数组
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	入场动画的配置

常见用例

API 参考

Syncfusion Angular BulletChart 的完整 API 参考见 references 文件夹。其中列出了与官方 API 文档一致的组件属性、方法、事件和使用说明。

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

1. 销售业绩跟踪：通过质量区间展示实际销售额与目标的对比
2. 质量指标：根据基准监控生产质量
3. 人力资源指标：跟踪员工绩效与目标的对比
4. 预算分析：比较实际支出与预算金额
5. 学习进度：展示学生朝学习目标迈进的进度
6. 健康指标：根据建议值展示健康指标
7. 项目状态：根据计划目标跟踪项目指标

---

后续步骤： 根据上述指南，选择符合当前需求的参考文件；如果是首次使用 Bullet Chart，也可以从 getting-started.md 开始。