Plotly如何实现共享y轴、同时展示day与date的双x轴绘图

你可以在Plotly生成的基础图表上，通过更新布局配置新增第二个X轴，和原有X轴的刻度位置对齐后替换为对应date列的文本即可，两种常用实现方式如下：

方式1：基于Plotly Express现有图表修改（改动最小） #

直接在你现有的px.line代码基础上新增顶层X轴配置即可，无需调整绘图逻辑：

import pandas as pd
import plotly.express as px

# 示例DataFrame
df = pd.DataFrame(data={'day': [1,2,3,4,5], 'date': pd.date_range("2020-01-01", periods=5, freq="D"), 'value': [43,45,52,55,63]})

# 你原有基础绘图代码
fig = px.line(df, x='day', y='value')

# 新增顶部X轴配置
fig.update_layout(
    # 第二个X轴配置
    xaxis2=dict(
        title="date",
        overlaying="x", # 与原有底部X轴共用同一坐标系
        side="top", # 显示在图表顶部
        tickmode="array",
        tickvals=df["day"], # 刻度位置和底部X轴的day值一一对应
        ticktext=df["date"].dt.strftime("%Y-%m-%d") # 刻度文本替换为日期
    ),
    margin=dict(t=50) # 调整上边距避免X轴标题被截断
)

fig.show()

如果需要两个X轴都放在底部相邻排布，修改配置如下即可：

fig.update_layout(
    xaxis=dict(
        title="day",
        domain=[0, 1]
    ),
    xaxis2=dict(
        title="date",
        overlaying="x",
        side="bottom",
        position=0.15, # 向下偏移，和第一个X轴错开
        tickmode="array",
        tickvals=df["day"],
        ticktext=df["date"].dt.strftime("%Y-%m-%d")
    ),
    margin=dict(b=80) # 调大下边距容纳两个X轴
)

方式2：基于Plotly Graph Objects实现（灵活性更高） #

如果需要更复杂的坐标轴自定义，可以直接用go模块构建图表：

import plotly.graph_objects as go

fig = go.Figure()
# 添加折线，用day作为X轴值
fig.add_trace(go.Scatter(x=df["day"], y=df["value"], mode="lines"))

# 配置双X轴
fig.update_layout(
    xaxis=dict(
        title="day",
        tickmode="array",
        tickvals=df["day"]
    ),
    xaxis2=dict(
        title="date",
        overlaying="x",
        side="top",
        tickmode="array",
        tickvals=df["day"],
        ticktext=df["date"].dt.strftime("%Y-%m-%d")
    ),
    yaxis_title="value",
    margin=dict(t=50)
)

fig.show()

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