Dash Plotly柱状图：日期X轴+星期颜色映射及下拉框格式问题

问题描述 #

在使用Dash绘制柱状图时，遇到两个问题：

• 下拉框中的日期显示为带时分秒的格式，不符合预期的日期展示样式
• 按星期几（DOW）映射颜色时，颜色未按照星期的自然顺序排列

解决方案 #

1. 优化下拉框日期显示格式 #

将下拉框的日期标签格式化为YYYY-MM-DD的友好格式，同时保留value为datetime类型以保证筛选逻辑正常。

2. 按星期顺序设置颜色映射 #

将DOW列转换为有序分类变量，指定星期的固定顺序（周一至周日），让Plotly按照该顺序分配颜色；同时调整数据统计方式，确保每个日期对应的星期信息被正确关联。

修改后的完整代码 #

import dash
from dash import dcc, html, Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px
import pandas as pd

# 生成数据
df = pd.DataFrame({'Type': ['A','B','B','B','C','C','D','E','E','E','E','F','F','F']})
N = 30
df = pd.concat([df] * N, ignore_index=True)

df['TIMESTAMP'] = pd.date_range(start='2022/01/01 07:30', end='2022/01/30 08:30', periods=len(df))
df['TIMESTAMP'] = pd.to_datetime(df['TIMESTAMP'], dayfirst=True).sort_values()

df['DATE'], df['TIME'] = zip(*[(d.date(), d.time()) for d in df['TIMESTAMP']])
df['DATE'] = pd.to_datetime(df['DATE'])
df = df.sort_values(by='DATE')

# 设置DOW为有序分类变量，指定星期顺序
week_order = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
df['DOW'] = df['DATE'].dt.day_name()
df['DOW'] = pd.Categorical(df['DOW'], categories=week_order, ordered=True)

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

filter_box = html.Div(children=[
    html.Div(children=[
        html.Label('选择日期:', style={'paddingTop': '2rem'}),
        dcc.Dropdown(
            id='DATE',
            options=[
                {'label': x.strftime('%Y-%m-%d'), 'value': x} for x in df['DATE'].unique()
            ],
            value=df['DATE'].unique(),
            multi=True
        ),
    ], className="four columns", style={'padding':'2rem', 'margin':'1rem'} )
])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.Div(filter_box, className="bg-secondary h-100"), width=2),
        dbc.Col([
            dbc.Row([
                dbc.Col(dcc.Graph(id='date-bar-chart')),
            ]),
        ], width=5),
    ])
], fluid=True)

@app.callback(
    Output('date-bar-chart', 'figure'),
    Input("DATE", "value")
)     
def date_chart(selected_dates):
    dff = df[df['DATE'].isin(selected_dates)]
    # 按DATE和DOW分组统计数量，确保每个日期对应正确的星期
    count_df = dff.groupby(['DATE', 'DOW']).size().reset_index(name='count')
    
    fig = px.bar(
        count_df,
        x='DATE',
        y='count',
        color='DOW',
        title='日期统计（按星期颜色区分）',
        color_discrete_sequence=px.colors.qualitative.Set3  # 可选：指定颜色序列
    )
    # 格式化X轴日期显示
    fig.update_xaxes(tickformat='%Y-%m-%d')
    return fig

if __name__ == '__main__':
    app.run_server(debug=True, port=8051)

关键修改说明 #

• 下拉框优化：在生成options时，使用x.strftime('%Y-%m-%d')将日期格式化为友好字符串，用户体验更直观。
• 有序颜色映射：通过pd.Categorical给DOW列指定固定顺序，Plotly会严格按照该顺序分配颜色，解决排序混乱问题。
• 数据统计调整：用groupby(['DATE', 'DOW']).size()替代value_counts，确保每个日期对应的星期信息不丢失，颜色映射准确。

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