什么是哑铃图？如何使用Highcharts创建哑铃图表？

Dumbbell chart / 哑铃图

哑铃图可以用来可视化两个不同时间点的数值，或者显示两个不同群体或观点之间的差异（例如，一个点代表男性，另一个点代表女性）。

哑铃图是棒棒糖图lollipop plot的一种变体。

哑铃图是一种强大而直观的数据可视化工具，它通过圆点的位置和连接线段的长度，同时呈现了绝对数值和相对变化，让数据的故事更加丰满。

核心特点：

两个圆点：分别代表同一指标在不同时间点、不同条件或不同组别的数值
连接线段：直观展示两个数据点之间的变化幅度和方向
每个哑铃：代表一个特定的类别或实体

何时使用哑铃图？

✅ 当你需要比较同一类别在两个时间点的数据时

✅ 当你需要展示对照组与实验组的差异时

✅ 当你需要对比目标与实际完成情况时

✅ 当你需要同时比较多组数据的变化时

开始使用Highcharts创建哑铃图

使用哑铃系列图时，需要加载Highcharts库以及highcharts-more和dumbbell.js模块。

以下是将哑铃模块加载到网页中的示例：

html 复制代码

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/dumbbell.js"></script>

下面的演示展示了1960年至2018年间预期寿命的变化。

Highcharets哑铃图配置选项

点可以通过以下方式自定义：

**标记 ** series.marker - 上部点的标记选项。
低标记 series.lowMarker - 下部点的标记选项。

下面的演示展示了在哑铃图中使用上下标记的情况。

另外，可以通过以下方式更改点的颜色：

fillColor series.marker.fillColor - 上方点的颜色。
lowColor series.lowColor - 下方点的颜色。

可以通过以下方式更改点和连接线的上方颜色：

color series.color

连接线可以通过以下方式自定义：

connectorColor series.connectorColor - 连接线的颜色。
connectorWidth series.connectorWidth - 连接线的宽度。

哑铃图的主要应用场景与图表价值

1 时间前后对比（最常用场景）

场景描述：展示同一指标在不同时间点的变化，如年度对比、季度对比、政策实施前后等。

洞察价值：快速识别哪些类别增长最快、哪些出现下滑、整体变化趋势如何。

2 组别/条件对比

场景描述：比较同一类别在不同条件下的数值差异，如对照组与实验组、男女差异、地区差异等。

洞察价值：直观展示群体差异，发现不公平或异常现象。

3 目标与实际对比

场景描述：展示预算与实际支出、目标销售额与实际完成、计划进度与实际进度等。

洞察价值：快速识别哪些部门超支、哪些未达目标。

4 生物学与医学研究

场景描述：展示用药前后指标变化、对照组与实验组差异、基因表达水平比较等。

示例：

用药前后患者生理指标的变化
不同基因在正常组织与肿瘤组织中的表达差异
展示CNV（拷贝数变异）频率，红点代表缺失频率，蓝点代表扩增频率

洞察价值：直观展示干预措施的效果，发现生物标志物。

5 调查与满意度分析

场景描述：展示同一群体在不同时间点的满意度变化，或不同群体对同一问题的态度差异。

6 财务与绩效分析

场景描述：展示财务指标变化、投资回报对比、绩效评估等。