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 财务与绩效分析
场景描述：展示财务指标变化、投资回报对比、绩效评估等。