Plotly图表能否添加双X轴？需配置年份主X轴与月份子X轴

当然可以实现双X轴的需求，以下是具体的实现思路和代码示例：

核心逻辑 #

通过Plotly的轴配置功能，分别定义主X轴（显示月份）和次X轴（显示年份），将次轴与主轴重叠，并通过刻度定位让年份标签与对应月份区间对齐。

代码示例（以Python为例） #

import plotly.graph_objects as go
import pandas as pd

# 模拟匹配你需求的数据集
df = pd.DataFrame({
    "month": ["Sep", "Nov", "Jan", "Mar", "May", "Jul"],
    "year": [2021, 2021, 2022, 2022, 2023, 2023],
    "value": [12, 15, 18, 20, 22, 25]
})

fig = go.Figure()

# 添加数据轨迹，用索引作为x值来对齐双轴刻度
fig.add_trace(go.Scatter(
    x=df.index,
    y=df["value"],
    mode="lines+markers",
    text=df["month"],
    name="指标数据"
))

# 配置主X轴（底部，显示月份）
fig.update_layout(
    xaxis=dict(
        tickmode="array",
        tickvals=df.index,
        ticktext=df["month"],
        title="月份",
        domain=[0, 1]
    ),
    # 配置次X轴（顶部，显示年份）
    xaxis2=dict(
        tickmode="array",
        # 定位各年份第一个对应月份的索引，确保年份标签位置准确
        tickvals=[df[df["year"] == y].index[0] for y in df["year"].unique()],
        ticktext=df["year"].unique(),
        title="年份",
        overlaying="x",
        side="top",
        domain=[0, 1]
    ),
    yaxis_title="数值",
    title="带双X轴的Plotly图表"
)

fig.show()

关键注意事项 #

• 如果你的原始图表是用Plotly Express创建的，直接在生成的fig对象上调用update_layout()添加xaxis2配置即可，无需重构轨迹。
• 年份轴的tickvals需要根据实际数据中各年份对应的第一个月份位置设置，保证年份标签与对应月份区间准确对齐。
• 无论折线图、柱状图还是其他类型，轴配置逻辑通用，仅需调整add_trace中的轨迹类型（如go.Bar）。

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