Plotly柱状图添加百分比副轴并解决颜色与对齐问题

核心问题分析 #

• 重复图例：双轴柱状图的两个trace默认都会生成图例，需隐藏其中一个冗余图例
• X轴标签错位：两组柱子默认会并排显示，导致与X轴刻度不对齐，需通过偏移组设置让柱子共用同一位置

示例数据与完整修复代码 #

假设你的DataFrame结构如下：

import pandas as pd
import plotly.graph_objects as go

# 示例数据
df = pd.DataFrame({
    'names': ['A', 'B', 'C', 'D'],
    'values': [120, 90, 150, 80],
    'pct': [0.3, 0.22, 0.37, 0.11]
})

以下是修复后的完整代码：

fig = go.Figure()

# 添加主轴数值柱状图
fig.add_trace(go.Bar(
    x=df['names'],
    y=df['values'],
    name='数值',
    marker_color='#1f77b4',
    offsetgroup=0  # 绑定偏移组，确保和副轴柱子同位置
))

# 添加副轴百分比柱状图
fig.add_trace(go.Bar(
    x=df['names'],
    y=df['pct'],
    marker_color='#ff7f0e',
    yaxis='y2',
    offsetgroup=0,  # 与主轴共用偏移组，避免柱子错位
    showlegend=False  # 隐藏该trace的图例，解决重复问题
))

# 配置布局细节
fig.update_layout(
    title='数值与百分比双轴柱状图',
    xaxis=dict(
        title='类别',
        tickmode='array',
        tickvals=df['names'],  # 强制X轴刻度与类别完全对齐
        ticktext=df['names']
    ),
    yaxis=dict(
        title='数值',
        side='left'
    ),
    yaxis2=dict(
        title='百分比',
        side='right',
        overlaying='y',
        tickformat='.0%'  # 设置百分比显示格式
    ),
    barmode='overlay',  # 开启叠加模式，配合偏移组实现同位置显示
    bargap=0.2,  # 控制柱子之间的间距
    legend=dict(
        orientation='h',
        yanchor='bottom',
        y=1.02,
        xanchor='right',
        x=1
    )
)

fig.show()

关键修复点说明 #

• 消除重复图例：给副轴的柱状图trace添加showlegend=False，只保留主轴的图例项
• 对齐X轴与柱子：
  • 两个柱状图都设置offsetgroup=0，让它们共用同一偏移组，柱子会重叠在同一位置
  • 设置barmode='overlay'允许柱子叠加显示
  • 显式指定X轴的tickvals和ticktext为df['names']，确保刻度与类别完全匹配
• 优化视觉体验：通过bargap调整柱子间距，给副轴设置百分比格式提升可读性

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