Plotly中x轴为datetime时无法设置bargap为0的问题求助

问题描述 #

使用Plotly绘制柱状图，x轴为datetime类型时，设置bargap=0后柱状条之间仍存在明显间隙，代码如下：

import pandas as pd
import numpy as np
import plotly
print(plotly.__version__)

df = pd.DataFrame({
    "month": pd.date_range(start='2021-01-01', end='2022-08-01', freq='MS'),
    "count": np.random.randint(0, 11, size=20)
})

import plotly.express as px 

fig = px.bar(df, x='month', y='count')
fig.update_layout(width=1200, height=400, bargap=0)
fig.update_layout(xaxis_rangeslider_visible=False)
fig.update_xaxes(
    dtick="M1",
    tickformat="%b\n%Y")
fig.show()

解决方案 #

当x轴为datetime类型时，Plotly的bargap参数基于时间间隔比例计算，直接设为0无法让柱状条完全贴合。需通过调整柱状条宽度填满时间间隔，具体修改如下：

方法一：固定宽度适配月度数据

设置柱状条宽度为28天对应的毫秒数，适配不同月份的天数差异，同时保持bargap=0：

import pandas as pd
import numpy as np
import plotly
print(plotly.__version__)

df = pd.DataFrame({
    "month": pd.date_range(start='2021-01-01', end='2022-08-01', freq='MS'),
    "count": np.random.randint(0, 11, size=20)
})

import plotly.express as px 

fig = px.bar(df, x='month', y='count')
# 设置bar宽度为28天的毫秒数
fig.update_traces(width=pd.Timedelta("28 days").total_seconds() * 1000)
fig.update_layout(width=1200, height=400, bargap=0)
fig.update_layout(xaxis_rangeslider_visible=False)
fig.update_xaxes(
    dtick="M1",
    tickformat="%b\n%Y")
fig.show()

方法二：精准匹配时间间隔

计算相邻日期的时间差，以此作为柱状条宽度，可留少量比例避免潜在重叠：

# 计算相邻月份的时间差（毫秒）
day_diff = (df['month'].iloc[1] - df['month'].iloc[0]).total_seconds() * 1000
# 设置宽度为时间差的95%，也可直接设为day_diff
fig.update_traces(width=day_diff * 0.95)
fig.update_layout(bargap=0)

原理说明 #

datetime类型x轴以时间戳为单位，bargap控制的是时间间隔的间隙比例，而width参数直接定义每个柱状条的时间跨度。通过将width设置为接近数据时间间隔的毫秒数，配合bargap=0，就能实现柱状条紧密贴合的效果。

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