Python中Plotly如何设置Y轴hoverlabel及调整成交量图大小

架构老林

2026-8-24

Plotly双轴hover显示+成交量图尺寸调整方案

一、实现十字线末端双轴悬浮标签显示

要让十字线同时显示两个轴的hoverlabel，核心是在布局里配置hover模式和轴的spike属性：

设置全局hovermode='x'，确保鼠标悬停时以x轴为基准同步显示所有trace的信息
给每个Y轴开启showspikes=True，并设置spikemode='across'，让十字线跨轴显示
可选：自定义hoverlabel的样式（背景色、字体等）

二、缩小成交量图尺寸（解决超出区域问题）

如果是用make_subplots创建的上下子图，直接在创建子图时指定row_heights分配高度比例，比如让K线图占70%高度，成交量占30%，同时调整布局margin避免内容溢出。

修改后代码示例

import plotly.graph_objects as go
from plotly.subplots import make_subplots

# 创建子图，指定行高度比例
fig = make_subplots(rows=2, cols=1, shared_xaxes=True, row_heights=[0.7, 0.3], vertical_spacing=0.05)

# 添加K线图（示例数据）
fig.add_trace(
    go.Candlestick(
        x=['2024-01-01', '2024-01-02', '2024-01-03'],
        open=[100, 105, 102],
        high=[110, 108, 106],
        low=[98, 103, 99],
        close=[105, 104, 105],
        name='K线'
    ),
    row=1, col=1
)

# 添加成交量图（示例数据）
fig.add_trace(
    go.Bar(
        x=['2024-01-01', '2024-01-02', '2024-01-03'],
        y=[1000, 1500, 1200],
        name='Volume'
    ),
    row=2, col=1
)

# 配置布局，实现双轴hover和调整尺寸
fig.update_layout(
    hovermode='x',  # 以x轴为基准同步hover
    margin=dict(l=50, r=50, t=50, b=50),  # 调整边距避免溢出
    height=600  # 整体图高度
)

# 配置Y轴的spike属性，显示十字线和hoverlabel
fig.update_yaxes(
    showspikes=True,
    spikemode='across',
    spikecolor='#999',
    spikesnap='cursor',
    hoverlabel=dict(bgcolor='white', font_size=12)  # 自定义hoverlabel样式
)

fig.show()