syncfusion-aspnetcore-bullet-chart

Syncfusion ASP.NET Core 子弹图

子弹图是条形图的一种变体，能够以紧凑且直观高效的形式展示实际表现与目标基准的对比。它结合了多个数据元素（数值条、目标标记、范围），可即时呈现表现情况。

何时使用此技能

在需要以下功能时，使用子弹图技能：

• 比较表现与目标 - 在单个可视化图表中同时展示实际值和目标值
• 构建 KPI 仪表板 - 快速一览关键绩效指标
• 通过基准展示进度 - 使用对比范围（较差、满意、良好）跟踪目标进度
• 监控多项指标 - 在仪表板中展示多个子弹图，以便进行对比分析
• 创建紧凑的可视化图表 - 与传统条形图相比，用更少的空间容纳更多数据
• 构建绩效报告 - 高管仪表板、销售跟踪、生产力指标、收入预测

常见场景：

• 销售额与配额跟踪
• 员工表现与目标对比
• 项目里程碑与截止日期对比
• 收入与预测对比
• 客户满意度评分与目标对比

---

导航与文档指南

快速入门

📄 阅读： references/getting-started.md

• 安装和 ASP.NET Core 项目设置
• 安装 NuGet 包
• 添加 TagHelper 和脚本资源
• 使用数据创建第一个子弹图
• 为图表添加标题

数据绑定与配置

📄 阅读： references/data-binding.md

• 配置 DataSource 属性
• 映射数值字段和目标字段
• 使用数据模型
• 动态和静态数据绑定
• 数据结构最佳实践

坐标轴自定义

📄 阅读： references/axis-customization.md

• 自定义刻度线和标签
• 标签格式和数字格式
• 刻度位置和标签位置选项
• 类别标签配置
• 高级坐标轴定位

范围与对比条

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

• 配置表现范围（较差、满意、良好）
• 目标条类型（Rect、Cross、circle）
• 自定义数值条
• 创建有效的对比可视化图表
• 配色方案和范围样式

自定义与布局

📄 阅读： references/customization.md

• 方向（水平或垂直渲染）
• 从右向左（RTL）支持
• 动画设置和过渡效果
• 图表尺寸和响应式尺寸
• 主题和颜色自定义

数据标签、工具提示与无障碍访问

📄 阅读： references/data-and-accessibility.md

• 显示数据标签
• 配置悬停工具提示
• 用于无障碍访问的 WAI-ARIA 属性
• 键盘导航支持
• 创建无障碍仪表板

---

快速入门示例

包含数值和目标的基础子弹图：

// CSHTML.cs - Controller/Page code
public class QuickStartBulletData
{
    public double Value { get; set; }
    public double Target { get; set; }
    public string Category { get; set; }
}

public IActionResult Index()
{
    ViewBag.ChartData = new List<QuickStartBulletData>
    {
        new QuickStartBulletData { Value = 75, Target = 80, Category = "Q1" },
        new QuickStartBulletData { Value = 85, Target = 90, Category = "Q2" },
        new QuickStartBulletData { Value = 65, Target = 75, Category = "Q3" }
    };
    return View();
}

<ejs-bulletchart id="container" 
    dataSource="@ViewBag.ChartData" 
    valueField="Value" 
    targetField="Target"
    categoryField="Category"
    minimum="0"
    maximum="100"
    interval="20"
    title="Sales Performance">
    <e-bullet-range-collection>
        <e-bullet-range end="50" color="lightgray"></e-bullet-range>
        <e-bullet-range end="75" color="lightblue"></e-bullet-range>
        <e-bullet-range end="100" color="lightgreen"></e-bullet-range>
    </e-bullet-range-collection>
</ejs-bulletchart>

---

常见模式

模式 1：包含多个子弹图的仪表板

并排展示多项指标，便于高管监控：

// Each metric has its own data and configuration
var salesData = new List<BulletChartData> { /* sales vs quota */ };
var revenueData = new List<BulletChartData> { /* revenue vs forecast */ };
var customerSatisfaction = new List<BulletChartData> { /* score vs target */ };

模式 2：使用类别展示多个数值

在一个图表中展示多个类别：

<ejs-bulletchart id="container" 
    dataSource="@ViewBag.MultipleCategoryData"
    categoryField="Category"
    valueField="Value"
    targetField="Target">
</ejs-bulletchart>

模式 3：基于范围的颜色编码

定义范围，自动为不同表现水平设置颜色：

<e-bullet-range-collection>
    <e-bullet-range end="25" color="#ff6b6b"></e-bullet-range>  
    <e-bullet-range end="50" color="#ffd43b"></e-bullet-range>  
    <e-bullet-range end="75" color="#69db7c"></e-bullet-range>  
    <e-bullet-range end="100" color="#51cf66"></e-bullet-range> 
</e-bullet-range-collection>

---

关键配置属性

属性	类型	默认值	用途
dataSource	object	null	要显示的数据集合
valueField	string	""	映射到实际值／特征值的字段名称
targetField	string	""	映射到目标值／比较值的字段名称
categoryField	string	null	多行图表中类别标签对应的字段
title	string	""	图表标题文本
subtitle	string	""	图表副标题文本
titlePosition	TextPosition	Top	标题位置：Top、Bottom、Left、Right
titleStyle	BulletChartBulletLabelStyle	null	图表标题的字体／样式
subtitleStyle	BulletChartBulletLabelStyle	null	图表副标题的字体／样式
orientation	OrientationType	Horizontal	布局方向：Horizontal 或 Vertical
minimum	double	NaN	刻度轴的最小值
maximum	double	NaN	刻度轴的最大值
interval	double	NaN	轴刻度线之间的间隔
ranges	List<Range>	null	用于背景着色的定性范围定义
animation	BulletChartAnimation	null	动画设置（enable、duration、delay）
tooltip	BulletChartBulletTooltipSettings	null	悬停提示配置
dataLabel	BulletChartBulletDataLabel	null	显示在特征条上的值标签
labelStyle	BulletChartBulletLabelStyle	null	轴标签的字体／样式
categoryLabelStyle	BulletChartBulletLabelStyle	null	类别标签的字体／样式
labelFormat	string	""	轴标签数字格式（例如 "n2"、"c2"、"p1"）
labelPosition	LabelsPlacement	Outside	轴标签位置：Inside 或 Outside
tickPosition	TickPosition	Outside	刻度线位置：Inside 或 Outside
majorTickLines	BulletChartMajorTickLines	null	主刻度线的宽度、高度和颜色
minorTickLines	BulletChartMinorTickLines	null	次刻度线的宽度、高度和颜色
minorTicksPerInterval	double	4	每个主刻度间的次刻度数量
opposedPosition	boolean	false	在相对侧渲染轴
enableGroupSeparator	boolean	false	在轴标签中显示千位分隔符
enableRtl	boolean	false	支持从右向左渲染
enablePersistence	boolean	false	在页面重新加载后保留组件状态
theme	ChartTheme	Material	视觉主题（例如 Material、Bootstrap5、Fluent2）
width	string	null	图表宽度，单位为像素或百分比（例如 "500px"、"100%"）
height	string	null	图表高度，单位为像素或百分比
margin	BulletChartMargin	null	左、右、上、下边距
border	BulletChartContainerBorder	null	图表边框的颜色和宽度
valueFill	string	null	特征条／实际值条的填充颜色
valueHeight	double	6	特征条的高度／粗细
valueBorder	BulletChartValueBorder	null	特征条边框的颜色和宽度
type	FeatureType	Rect	特征条的形状：Rect 或 Dot
targetColor	string	"#191919"	比较标记／目标标记的颜色
targetWidth	double	5	目标标记的宽度／粗细
targetTypes	object	null	目标标记的形状：Rect、Circle 或 Cross
legendSettings	BulletChartBulletChartLegendSettings	null	图例的可见性和位置
query	string	null	用于筛选数据源的查询字符串
locale	string	null	数字格式的区域设置
tabIndex	double	1	键盘访问用的 Tab 索引
htmlAttributes	object	—	其他 HTML 属性（title、name 等）

事件

事件	用途
load	子弹图加载前触发
loaded	子弹图渲染后触发
tooltipRender	工具提示渲染前触发
legendRender	图例渲染前触发
beforePrint	图表打印前触发
bulletChartMouseClick	单击图表时触发

---

常见用例

销售仪表板：

• 跟踪各销售代表的业绩与配额的对比
• 展示季度收入与预测的对比
• 监控销售管道与目标的对比

人力资源与绩效：

• 员工 KPI 与目标的对比
• 团队生产力指标
• 项目里程碑进度

运营：

• 系统正常运行时间与 SLA 目标的对比
• 响应时间与可接受水平的对比
• 成本与预算的对比

零售：

• 门店销售额与目标的对比
• 库存周转率与目标的对比
• 客户满意度与基准的对比