图表学习|基于highcharts创建子弹图表,以及子弹图的应用与扩展设计

Bullet chart 子弹图表

子弹图(Bullet Chart)是一种形似子弹轨迹的线性信息图表,由数据可视化专家斯蒂芬·菲(Stephen Few)于2005年设计提出,旨在替代传统仪表盘上常见的里程表、时速表等基于圆形的信息表达方式。

命名的由来:由于该类信息图的样子很像子弹射出后带出的轨道,因此被称为"子弹图"。

他是计量图的一类、是一种柱状图的变体。子弹系列显示单一的度量值,将其与目标进行比较,并在性能的定性范围内显示,范围可以通过 y 轴上的 plotBands 设置。能够有效地将实际值与目标值进行比较,同时展示定性的性能范围。它通常用于展示关键绩效指标(KPI),并且比传统的仪表图更为紧凑和直观。

特征

  • 单一度量:通常用于显示一个关键指标的实际值。
  • 目标值:可以清晰地展示目标值,帮助用户快速判断实际值与目标之间的差距。
  • 定性范围:通过不同的颜色区分性能范围(如"优秀"、"良好"、"差"等),使得数据的解读更加直观。
  • 紧凑性:相比于其他图表类型,子弹图在空间上更加节省,适合在仪表盘上使用。

应用场景

  1. 财务与销售KPI跟踪

    场景描述:展示销售额、利润率等关键指标与目标、预算的对比。

    示例:公司销售金额的目标完成度评估,每个季度显示当前完成的进度,同时展示全年整体的额定目标数据。

  2. 企业多部门绩效对比

    场景描述:清晰对比不同部门的工作成效。

    示例:科技企业的研发部门(新产品推出数量)、市场部门(市场份额增长幅度)、售后部门(客户投诉解决率)可通过子弹图并排展示,企业高层能迅速辨别各部门表现优劣。

  3. 项目管理绩效把控

    场景描述:跟踪工程实际进度完成比例、成本控制情况、质量达标程度。

    示例:建筑工程项目中,主条形图体现进度,目标线对应项目计划的进度节点。若进度条未达目标线且处于不良参考区间,意味着需要及时调整。

  4. 员工个人绩效评估

    场景描述:针对每个销售人员绘制子弹图,展示关键绩效指标。

    示例:销售额、新客户开发数量、客户回款率等指标的目标达成情况,帮助管理者及时给予反馈与辅导。

  5. 呼叫中心指标监控

    场景描述:衡量呼叫量、呼叫应答速度、放弃呼叫百分比等指标。

  6. 制造业质量跟踪

    场景描述:跟踪缺陷数量、订单发货情况。

  7. 负面数据表达

    场景描述:专门表达"负面(消极)数据"时,将子弹图做方向上的反转。

    示例:公司开销、次品数量等对公司有负面影响的数据,通过反转表达从视觉上就能明显区别于其他数据。

有关更详细的示例和文档,请查看 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 零值处理

支持显示零值条柱,即使某一类别没有数据,也会显示可见的比例条柱为零,保持图表的比例和上下文。

相关推荐
FYKJ_201014 小时前
springboot大学校园论坛管理系统--附源码42669
java·javascript·spring boot·python·spark·django·php
愚公搬代码15 小时前
【愚公系列】《数据可视化分析与实践》018-数据集(单表数据集)
信息可视化
Highcharts.js17 小时前
数据之美:用Highcharts打造专业级弧线图
javascript·数据库·highcharts·图表开发·弧线图
SuperEugene18 小时前
错误处理与 try/catch:真实项目里应该捕什么错?
前端·javascript·面试
夕除20 小时前
js--22
前端·javascript·python
Qhappy20 小时前
某加密企业版过frida检测
javascript
用户57573033462420 小时前
🔥 一文搞懂 JavaScript 包装类(面试必考)
javascript
滕青山21 小时前
Base64编码/解码 核心JS实现
前端·javascript·vue.js
sww_102621 小时前
SAA ReactAgent工作原理
开发语言·前端·javascript