Plotly同图绘制条形图与折线图异常及双X轴设置问题

问题根源 #

你遇到的两个问题本质是同一原因：未将两个图表绑定到不同的X轴，导致数据量纲差异大时条形图被压缩至不可见，且无法实现顶部X轴的需求。

解决步骤及代码示例 #

1. 核心思路 #

• 创建两个独立X轴：底部X轴对应total数据，顶部X轴对应count数据
• 将水平条形图绑定到顶部X轴，折线图绑定到底部X轴
• 共享Y轴保证两类图表的类别对齐

2. 完整代码 #

import plotly.graph_objects as go

# 示例数据
categories = ["类别A", "类别B", "类别C", "类别D"]
count_data = [12, 28, 17, 23]
total_data = [120, 280, 170, 230]

# 初始化figure
fig = go.Figure()

# 添加水平条形图（绑定顶部X轴）
fig.add_trace(go.Bar(
    y=categories,
    x=count_data,
    name="Count",
    orientation="h",
    xaxis="x2"  # 指定使用第二个X轴
))

# 添加折线图（绑定底部X轴）
fig.add_trace(go.Scatter(
    y=categories,
    x=total_data,
    name="Total",
    mode="lines+markers",
    line=dict(width=3)
))

# 配置布局：双X轴设置
fig.update_layout(
    # 底部X轴（对应Total）
    xaxis=dict(
        title="Total 数据",
        side="bottom"
    ),
    # 顶部X轴（对应Count）
    xaxis2=dict(
        title="Count 数据",
        side="top",
        overlaying="x",  # 与底部X轴叠加，共享Y轴
        anchor="y"  # 锚定Y轴，确保类别对齐
    ),
    yaxis=dict(
        title="分类"
    ),
    barmode="overlay",  # 允许条形图与折线图叠加显示
    legend=dict(
        x=0.1,
        y=1.1,
        orientation="h"
    )
)

fig.show()

3. 关键细节说明 #

• xaxis="x2"：明确将条形图关联到顶部X轴，避免与折线图共用同一X轴导致的压缩问题
• overlaying="x"：让顶部X轴叠加在底部X轴上，实现双X轴布局
• anchor="y"：保证两个X轴都锚定到同一个Y轴，确保分类完全对齐
• 如果数据量差距极大，可通过range参数手动设置X轴范围，比如xaxis2=dict(range=[0, max(count_data)+5], ...)，防止条形图显示过短

内容的提问来源于stack exchange，提问作者1cjtc jj