Bullet chart 子弹图表
子弹图(Bullet Chart)是一种形似子弹轨迹的线性信息图表,由数据可视化专家斯蒂芬·菲(Stephen Few)于2005年设计提出,旨在替代传统仪表盘上常见的里程表、时速表等基于圆形的信息表达方式。
命名的由来:由于该类信息图的样子很像子弹射出后带出的轨道,因此被称为"子弹图"。
他是计量图的一类、是一种柱状图的变体。子弹系列显示单一的度量值,将其与目标进行比较,并在性能的定性范围内显示,范围可以通过 y 轴上的 plotBands 设置。能够有效地将实际值与目标值进行比较,同时展示定性的性能范围。它通常用于展示关键绩效指标(KPI),并且比传统的仪表图更为紧凑和直观。
特征
- 单一度量:通常用于显示一个关键指标的实际值。
- 目标值:可以清晰地展示目标值,帮助用户快速判断实际值与目标之间的差距。
- 定性范围:通过不同的颜色区分性能范围(如"优秀"、"良好"、"差"等),使得数据的解读更加直观。
- 紧凑性:相比于其他图表类型,子弹图在空间上更加节省,适合在仪表盘上使用。
应用场景
-
财务与销售KPI跟踪
场景描述:展示销售额、利润率等关键指标与目标、预算的对比。
示例:公司销售金额的目标完成度评估,每个季度显示当前完成的进度,同时展示全年整体的额定目标数据。
-
企业多部门绩效对比
场景描述:清晰对比不同部门的工作成效。
示例:科技企业的研发部门(新产品推出数量)、市场部门(市场份额增长幅度)、售后部门(客户投诉解决率)可通过子弹图并排展示,企业高层能迅速辨别各部门表现优劣。
-
项目管理绩效把控
场景描述:跟踪工程实际进度完成比例、成本控制情况、质量达标程度。
示例:建筑工程项目中,主条形图体现进度,目标线对应项目计划的进度节点。若进度条未达目标线且处于不良参考区间,意味着需要及时调整。
-
员工个人绩效评估
场景描述:针对每个销售人员绘制子弹图,展示关键绩效指标。
示例:销售额、新客户开发数量、客户回款率等指标的目标达成情况,帮助管理者及时给予反馈与辅导。
-
呼叫中心指标监控
场景描述:衡量呼叫量、呼叫应答速度、放弃呼叫百分比等指标。
-
制造业质量跟踪
场景描述:跟踪缺陷数量、订单发货情况。
-
负面数据表达
场景描述:专门表达"负面(消极)数据"时,将子弹图做方向上的反转。
示例:公司开销、次品数量等对公司有负面影响的数据,通过反转表达从视觉上就能明显区别于其他数据。
有关更详细的示例和文档,请查看 API.

点击 here 查看代码。
如何创建子弹图
项目符号系列需要以下模块"modules/bullet.js"。
要创建项目符号系列,请在系列选项中添加以下配置:
js
{
type : 'bullet',
data : [{
y : 20, // The value of a point
target: 50 // The target value of a point
}],
targetOptions: { // Options related with look and position of targets
width: '140%', // The width of the target
height: 3, // The height of the target
borderWidth: 0, // The border width of the target
borderColor: 'black', // The border color of the target
color: 'black' // The color of the target
}
}
targetOptions 可以为每个点单独设置,以创建个性化的目标选项。在点级别甚至系列级别,targetOptions 是可选的------默认选项将会被设置。默认选项的值可以在 API 参考API reference 中找到。
子弹图的扩展设计
1 同时表达正值和负值数据
例如表达公司的盈亏时,可通过子弹图同时展示正负值。
2 阶段性数据对比
定义全年的额定目标,每个季度阶段性地显示当前完成的进度,同时展示阶段性数据和全年整体目标。
3 阈值与条件格式
可关联红黄绿等交通灯颜色:实际值超过目标110%为绿色,达成目标为黄色,未达目标(<99%)为红色。
4 零值处理
支持显示零值条柱,即使某一类别没有数据,也会显示可见的比例条柱为零,保持图表的比例和上下文。