Plotly图表动态尺寸设置与X轴日期格式优化需求

1. 调整X轴日期格式并显示全部日期 #

要实现「July 2010」样式的日期标签并展示所有月份+年份，需做以下修改：

• 替换日期格式符为"%B %Y"（%B对应月份全称，%Y对应4位年份）
• 手动指定X轴刻度值与文本，确保所有唯一日期都被显示
• 移除原自动刻度相关的dtick设置，避免冲突

修改后的X轴配置代码：

# 确保DATE列为datetime类型（如果原始数据不是的话）
df['DATE'] = pd.to_datetime(df['DATE'])

# 提取并排序所有唯一日期
unique_dates = sorted(df['DATE'].dt.date.unique())
# 转换为「July 2010」格式的文本
tick_text = [date.strftime("%B %Y") for date in unique_dates]
# 转换为Plotly可识别的datetime格式刻度值
tick_vals = [pd.to_datetime(date) for date in unique_dates]

fig.update_xaxes(
    tickformat="%B %Y",
    tickmode='array',
    tickvals=tick_vals,
    ticktext=tick_text,
    ticks="outside",
    tickcolor="black",
    ticklen=10,
    minor=dict(
        ticklen=4,
        griddash='dot',
        gridcolor='white'
    )
)

2. 动态适配图表尺寸 #

根据DataFrame内容动态调整尺寸，核心逻辑：

• 高度：基于CODE的唯一数量计算，给每个CODE分配固定高度（可自行调整参数），再加上基础边距
• 宽度：直接使用Streamlit的容器宽度适配，无需手动设置固定值

修改后的图表初始化与显示代码：

# 动态计算高度：基础高度100px + 每个CODE占40px（可根据显示效果调整）
code_count = df['CODE'].nunique()
dynamic_height = 100 + code_count * 40

# 初始化图表时不固定width，使用动态高度
fig = px.scatter(df, x='DATE', y='CODE', color='DATA', 
                 height=dynamic_height, color_discrete_map=color_discrete_map)

# Streamlit显示时开启容器宽度适配
st.plotly_chart(fig, use_container_width=True)

完整修改后代码 #

import pandas as pd
import plotly.express as px
import streamlit as st

color_discrete_map = {'df1': 'rgb(255,0,0)',
                      'df2': 'rgb(0,255,0)',
                      'df3': '#11FCE4',
                      'df4': '#9999FF',
                      'df5': '#606060',
                      'df6': '#CC6600'}

# 预处理日期列（确保为datetime类型）
df['DATE'] = pd.to_datetime(df['DATE'])

# 动态计算图表高度
code_count = df['CODE'].nunique()
dynamic_height = 100 + code_count * 40

fig = px.scatter(df, x='DATE', y='CODE', color='DATA', 
                 height=dynamic_height, color_discrete_map=color_discrete_map)

fig.update_layout(
    margin=dict(l=250, r=0, t=0, b=40),  # 底部边距适当调整，避免日期标签被截断
)

# 配置X轴日期显示
unique_dates = sorted(df['DATE'].dt.date.unique())
tick_text = [date.strftime("%B %Y") for date in unique_dates]
tick_vals = [pd.to_datetime(date) for date in unique_dates]

fig.update_xaxes(
    tickformat="%B %Y",
    tickmode='array',
    tickvals=tick_vals,
    ticktext=tick_text,
    ticks="outside",
    tickcolor="black",
    ticklen=10,
    minor=dict(
        ticklen=4,
        griddash='dot',
        gridcolor='white'
    )
)

# 动态适配宽度
st.plotly_chart(fig, use_container_width=True)

补充说明 #

• 高度计算的参数（100、40）可根据实际显示效果微调，确保每个CODE标签清晰展示
• 如果原始DATE列不是datetime类型，必须保留pd.to_datetime的转换步骤

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