Plotly月度柱状图X轴日期显示错误，如何修正为正确日期？

问题场景 #

用Plotly绘制月度数据时，X轴日期完全错位：6月的数据对应显示7月，后续所有月份的日期都和实际数据不匹配。参考社区方案设置tick0和dtick后问题依然存在。

用户提供的原始代码 #

fig = go.Figure(data=[go.Bar(
                            x=df.index, 
                            y=df['val_1'], 
                            ),
                     go.Bar(
                            x=df.index, 
                            y=df['val_2'], 
                            ),
                     go.Bar(
                            x=df.index, 
                            y=df['val_3'], 
                            ),
                     go.Bar(
                            x=df.index, 
                            y=df['val_4'], 
                            ),
                     go.Bar(
                            x=df.index, 
                            y=df['val_5'], 
                            )])
fig.layout.xaxis.tick0 = '2022-06-31' #adapted from similar question from community.plotly
fig.layout.xaxis.dtick = 'M1'

fig.show()

数据详情 #

DataFrame内容：

date,val_1,val_2,val_3,val_4,val_5
2022-06-30,24.87,27.5,32.76,22.39,24.08
2022-07-31,25.25,23.06,42.59,24.79,27.09
2022-08-31,23.72,32.7,41.33,27.85,31.2
2022-09-30,22.5,21.16,43.12,25.84,25.58
2022-10-31,21.76,24.79,33.95,22.34,21.07
2022-11-30,27.92,26.15,29.85,21.83,20.44

df.info()结果：

DatetimeIndex: 6 entries, 2022-06-30 to 2022-11-30
Data columns (total 5 columns):
 #   Column  Non-Null Count  Dtype  
---  ------  --------------  -----  
 0   val_1   6 non-null      float64
 1   val_2   6 non-null      float64
 2   val_3   6 non-null      float64
 3   val_4   6 non-null      float64
 4   val_5   6 non-null      float64

问题原因 #

1. 你的数据日期都是每月最后一天，但Plotly的dtick='M1'默认以每月第一天为刻度起始点，导致最后一天的数据被划分到下一个月的刻度区间。
2. 设置的tick0='2022-06-31'是无效日期（6月没有31号），进一步干扰了刻度的计算逻辑。

三种可行解决方案 #

方案1：修改数据索引为每月第一天 #

直接把DataFrame的日期索引转换为对应月份的第一天，让数据和Plotly的默认月度刻度对齐：

# 将索引转换为每月第一天
df.index = df.index.to_period('M').to_timestamp()

方案2：自定义X轴刻度与标签（不修改原始数据） #

强制指定刻度位置为你的数据日期，同时设置标签显示为年月格式，完全匹配实际数据：

fig.update_xaxes(
    tickmode='array',
    tickvals=df.index,  # 刻度位置对应数据的日期
    ticktext=df.index.strftime('%Y-%m')  # 显示为"年-月"格式
)

方案3：修正tick0并设置刻度格式 #

把tick0改为有效日期（比如2022-06-01），同时设置tickformat让刻度显示为年月，修正刻度计算：

fig.layout.xaxis.tick0 = '2022-06-01'
fig.layout.xaxis.dtick = 'M1'
fig.layout.xaxis.tickformat = '%Y-%m'

完整修复代码示例（方案2） #

import plotly.graph_objects as go
import pandas as pd

# 构造数据（可替换为你的实际数据读取逻辑）
data = """date,val_1,val_2,val_3,val_4,val_5
2022-06-30,24.87,27.5,32.76,22.39,24.08
2022-07-31,25.25,23.06,42.59,24.79,27.09
2022-08-31,23.72,32.7,41.33,27.85,31.2
2022-09-30,22.5,21.16,43.12,25.84,25.58
2022-10-31,21.76,24.79,33.95,22.34,21.07
2022-11-30,27.92,26.15,29.85,21.83,20.44"""
df = pd.read_csv(pd.compat.StringIO(data), parse_dates=['date'], index_col='date')

# 创建柱状图
fig = go.Figure(data=[
    go.Bar(x=df.index, y=df['val_1']),
    go.Bar(x=df.index, y=df['val_2']),
    go.Bar(x=df.index, y=df['val_3']),
    go.Bar(x=df.index, y=df['val_4']),
    go.Bar(x=df.index, y=df['val_5'])
])

# 应用自定义刻度修复
fig.update_xaxes(
    tickmode='array',
    tickvals=df.index,
    ticktext=df.index.strftime('%Y-%m')
)

fig.show()

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