Plotly多子图缩放时如何保持宽高比及实现轴联动？

一、缩放时保持宽高比 #

要实现多子图缩放时维持固定宽高比，需为每个y轴配置以下参数：

• scaleratio：定义轴的宽高比例（根据图表类型调整，OHLC图可设为1，柱状图按需调整）
• constrain='domain'：强制轴范围适应图表分配的区域，避免比例失衡
• 布局中设置固定的width和height，关闭autosize确保尺寸稳定

二、范围滑块缩放x轴时y轴同步缩放 #

默认共享x轴的多子图不会自动同步y轴范围，需为每个y轴开启autorange=True，让Plotly根据当前x轴范围内的数据集自动计算y轴的最优显示范围，实现x轴缩放时y轴同步适配。

修改后的完整代码 #

import pandas as pd
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import plotly.offline as pyo

# 示例数据
df = pd.read_csv('C:/Users/farmaan/Downloads/goog1y.csv')
df['Date'] = pd.to_datetime(df['Date'])

# 创建多子图，共享x轴
fig = make_subplots(rows=2, cols=1, shared_xaxes=True, vertical_spacing=0.05)

# 添加OHLC蜡烛图到上方子图
fig.add_trace(go.Candlestick(
    x=df['Date'],
    open=df['Open'],
    high=df['High'],
    low=df['Low'],
    close=df['Close'],
    increasing_line_color='green',
    decreasing_line_color='red',
    name='OHLC',
    yaxis='y1'
), row=1, col=1)

# 添加成交量柱状图到下方子图
fig.add_trace(go.Bar(
    x=df['Date'],
    y=df['Volume'],
    name='Volume'
), row=2, col=1)

# 配置子图布局，整合两个需求
fig.update_layout(
    xaxis_rangeslider_visible=True,
    width=1200,  # 与height=800保持3:2的宽高比，可按需调整
    height=800,
    autosize=False,  # 关闭自动尺寸调整，固定宽高
    xaxis=dict(
        showticklabels=True,
        rangebreaks=[dict(bounds=["sat", "mon"])]  # 隐藏周末
    ),
    yaxis=dict(
        domain=[0.5, 1],
        showticklabels=True,
        scaleratio=1,  # 保持OHLC图的宽高比
        constrain='domain',
        autorange=True  # x轴缩放时自动调整y轴范围
    ),
    yaxis2=dict(
        domain=[0, 0.3],
        showticklabels=True,
        anchor='x',
        title='Volume',
        scaleratio=0.1,  # 柱状图调整合适的宽高比，避免柱子过宽/窄
        constrain='domain',
        autorange=True  # x轴缩放时自动调整成交量y轴范围
    )
)

# 生成HTML可视化文件
pyo.plot(fig, filename='ohlc_candles.html')

关键说明 #

• scaleratio的数值需根据图表类型和需求调整：OHLC图设为1可保持蜡烛形态比例，成交量柱状图可设较小值（如0.1）避免柱子过度拉伸。
• autorange=True会让Plotly在x轴范围变化时，自动重新计算当前x区间内数据的y轴极值，确保数据始终完整显示。
• autosize=False配合固定width和height是维持整体宽高比的基础，避免窗口大小变化破坏比例。

内容的提问来源于stack exchange，提问作者Farman M