Plotly单X轴多Y轴绘图问题排查与解决

需求 #

用Plotly绘制4类数据，所有数据共享X轴：

• 其中3类共用主Y轴，按类别用不同颜色绘制并匹配图例
• 剩余1类使用独立的次Y轴

遇到的问题 #

• 用Plotly Express能快速画出正常的柱状图，但没法添加次Y轴；
• 尝试用pd.melt合并稀疏数据后，图例出现异常；
• 最初写的代码跑出来X轴刻度混乱，排查后发现是数据里的NaN和0值导致的问题。

解决方案 #

核心是先清洗数据过滤无效值，再用make_subplots创建支持主次Y轴的画布，逐个添加对应轴的柱状图trace：

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

# 示例DataFrame（可替换为你的实际数据）
data = {
    "类别A": [10, 0, 15, None, 20],
    "类别B": [5, 8, 0, 12, None],
    "类别C": [None, 7, 9, 0, 14],
    "类别D": [100, 150, 80, 200, 120]  # 指定为次Y轴的类别
}
df = pd.DataFrame(data, index=["X1", "X2", "X3", "X4", "X5"])

# 区分主、次Y轴对应的列
main_y_cols = ["类别A", "类别B", "类别C"]
secondary_y_col = "类别D"

# 创建支持主次Y轴的画布
fig = make_subplots(specs=[[{"secondary_y": True}]])

# 添加主Y轴的柱状图：先过滤0和NaN，避免X轴混乱
for col in main_y_cols:
    filtered_data = df[[col]]
    filtered_data = filtered_data[filtered_data > 0].dropna()
    fig.add_trace(
        go.Bar(x=filtered_data.index, y=filtered_data[col], name=col),
        secondary_y=False
    )

# 添加次Y轴的柱状图，同样过滤无效值
filtered_secondary = df[[secondary_y_col]]
filtered_secondary = filtered_secondary[filtered_secondary > 0].dropna()
fig.add_trace(
    go.Bar(x=filtered_secondary.index, y=filtered_secondary[secondary_y_col], name=secondary_y_col),
    secondary_y=True
)

# 配置图表布局
fig.update_layout(
    title="主次Y轴共享X轴柱状图",
    xaxis_title="X轴分类",
    yaxis_title="主Y轴数值",
    yaxis2_title="次Y轴数值",
    barmode='group'  # 可选：设置柱状图为分组显示
)

fig.show()

关键说明 #

1. 数据清洗：通过filtered_data[filtered_data > 0].dropna()过滤掉0值和NaN，彻底解决X轴刻度混乱的问题；
2. 主次Y轴控制：初始化画布时启用secondary_y，添加trace时通过secondary_y参数指定该数据属于主/次Y轴；
3. 图例自动匹配：每个go.Bar的name参数会自动生成对应图例，Plotly会自动分配不同颜色区分类别。

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