Plotly 柱状折线组合图如何添加顶部Spend对应百分比柱状图层

你需要先将子图调整为上下分层结构，再新增占比柱状图trace即可实现需求，具体补充修改内容如下：

1. 替换原有子图初始化代码 #

把原有初始化代码：

fig = go.Figure()
fig = make_subplots(specs=[[{"secondary_y": True}]])

替换为支持上下双图的初始化逻辑，同时提前计算占比字段：

# 计算100%占比，单系列场景直接固定为100即可，多系列堆叠场景可按分类占比求和为100计算
pay_wk_cpa['spend_pct'] = 100

# 初始化2行1列子图，共享x轴，设置高度比例1:3（顶部占比图占1份，原有图表占3份）
fig = make_subplots(
    rows=2, cols=1,
    shared_xaxes=True,
    vertical_spacing=0.02,
    row_heights=[0.25, 0.75],
    specs=[
        [{"secondary_y": False}], # 顶部子图配置
        [{"secondary_y": True}] # 底部原有图表配置
    ]
)

2. 新增顶部占比柱状图trace #

在所有add_trace代码的最前面，新增Spend字段的占比柱配置：

# 新增顶部100%占比柱状图
fig.add_trace(
    go.Bar(
        name         = 'Spend 占比',
        marker_color = '#2E86AB', # 可自行调整匹配整体配色
        x            = pay_wk_cpa['Week'].dt.strftime('%d %b'),
        y            = pay_wk_cpa['spend_pct'],
        text         = pay_wk_cpa['Spend'],
        textposition = 'inside',
        texttemplate = '%{text:.1f}',
        textfont     = dict(family = "Arial")
    ),
    row=1, col=1, # 指定放在顶部子图
    secondary_y=False
)

如果需要做多分类堆叠的100%占比柱状图，可自行拆分Spend字段为多个分类列，每个分类列计算对应占比，分别添加多个Bar trace到顶部子图即可自动堆叠

3. 调整原有trace的子图归属 #

在原有两个trace（CPA折线、Registrazioni - Pay柱状图）的add_trace参数中，新增row=2, col=1指定放到底部子图，示例如下：

# CPA折线trace修改示例
fig.add_trace(
    go.Scatter(...原有配置不变...),
    secondary_y  = True,
    row=2, col=1 # 新增这行参数
)

# 注册量柱状图trace修改示例
fig.add_trace(
    go.Bar(...原有配置不变...),
    secondary_y  = False,
    row=2, col=1 # 新增这行参数
)

4. 调整轴显示和布局参数 #

• 替换原有fig.update_yaxes(visible=False)代码，适配双图层的轴隐藏需求：

# 隐藏顶部占比图y轴
fig.update_yaxes(visible=False, row=1, col=1)
# 隐藏底部原有图表的两个y轴
fig.update_yaxes(visible=False, row=2, col=1)
fig.update_yaxes(visible=False, row=2, col=1, secondary_y=True)

• 将原有update_layout中的height参数从500调整为650左右，避免双图层叠加后图表拥挤，其他布局参数可保持不变。

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