Dash Plotly：如何使用 DatePickerRange 按日期过滤数据框？

Question

我使用 Dash Plotly 进行数据可视化。我已经有了显示正确数据的数据框和图表。 现在我想在用户使用日期选择器过滤数据时过滤数据并更新图表。

这是我的代码：

df = pd.read_csv('Sample_Data2.csv')
df["date_x"] = pd.to_datetime(df["date_x"]).dt.date

dfp = (
        df.groupby([df["date_x"], df["Categories of event"]])
        .size()
        .unstack("Categories of event", 0)
        .assign(Events=lambda d: d.sum(axis=1))
    )

graph = px.line(dfp, markers=True).update_layout(
    xaxis={'dtick': 'D'},
)

图表布局：

html.Div(className='graph', children=[
            dcc.Graph(
                id='graph',
                figure=graph,
                responsive=True,
                animate=True,
            )
        ]),

日期选择器组件：

html.Div(children=[
            dcc.DatePickerRange(
                id='date_filter',
                start_date=df['date_x'].min(),
                end_date=df['date_x'].max(),
                min_date_allowed=df['date_x'].min(),
                max_date_allowed=df['date_x'].max(),
            ),
        ]),

回调：

@app.callback(
    Output('graph', 'figure'),
    Input('date_filter', 'start_date'),
    Input('date_filter', 'end_date'),
    prevent_initial_call=True,
)
def update_graph(start_date, end_date):
    min_date = df['date_x'].min()
    min_date = start_date

    max_date = df['date_x'].max()
    max_date = end_date
    df_date = pd.date_range(min_date, max_date, freq='D')
    
    dfp = (
        df.groupby([df_date, df["Categories of event"]])
        .size()
        .unstack("Categories of event", 0)
        .assign(Events=lambda d: d.sum(axis=1))
    )


    graph = px.line(dfp, markers=True).update_layout(
        xaxis={'dtick': 'D'},
    )

    return graph

数据框抓取date_x 列并显示图表，但我无法使用生成min_date 和max_date 的日期选择器来执行此操作。

更新：

忘记提供数据：

id  date_x  Agency  Relevance_x Human_Validation    Event   Categories of event start date  end date    Duration    Issue   Local-National  Location_Category   Location_Province   Oganizer_type   CivilSocietySector  MainPoliticalSector CS_Location_Category    CS_Location_Province    size_of_participants    Arena_type  Arena_Province
45803   1/1/2018 7:19   ILNA    Yes 1   Protest Violent protests    12/29/2017  12/29/2017  1   Economic    National    Town    Khuzestan   Unknown None    Neutral National    NONE    unknown Streets Khuzestan
45817   1/1/2018 7:46   ILNA    Yes 1   Protest Confrontational protests (illegal and non violent)          1   Labour  Local   City    Azerbaijan, East    Workers Labour  Neutral Province Center Azerbaijan, East    medium group <50    Working places  Azerbaijan, East
45531   1/1/2018 18:17  ILNA    Yes 1   Protest Violent protests            1   Economic    National    City    Isfahan Unknown None    Neutral National    NONE    unknown Streets Isfahan
45529   1/1/2018 18:23  ILNA    Yes 1   Protest Violent protests            1   Economic    National    Province Center Markazi Unknown None    Neutral National    NONE    unknown Streets Markazi
45448   1/2/2018 6:36   ILNA    Yes 1   Protest Violent protests            1   Economic    National    Province Center Kurdistan   Unknown None    Neutral National    NONE    unknown Streets Kurdistan
45299   1/2/2018 10:05  ILNA    Yes 1   Protest Confrontational protests (illegal and non violent)          1   Economic    National    Capital Tehran  Unknown Student Movement    Neutral Capital Tehran  unknown University campuses Tehran
45029   1/3/2018 6:43   ILNA    Yes 1   Protest Violent protests            1   Economic    National    Town    Kermanshah  Unknown None    Neutral National    NONE    unknown Streets Kermanshah
44950   1/3/2018 8:49   ILNA    Yes 1   Protest Demonstrative protests (legal and nonviolent)           1   Political   National    Province Center Bushehr GONGO   Progovernment   Conservative    National    Bushehr unknown Streets Bushehr
44935   1/3/2018 9:22   ILNA    Yes 1   Protest Demonstrative protests (legal and nonviolent)           1   Political   National    Province Center Khuzestan   GONGO   Progovernment   Conservative    National    Khuzestan   unknown Streets Khuzestan
44935   1/3/2018 9:22   ILNA    Yes 1   Protest Demonstrative protests (legal and nonviolent)           1   Political   National    City    Khuzestan   GONGO   Progovernment   Conservative    National    Khuzestan   unknown Streets Khuzestan
44935   1/5/2018 9:22   ILNA    Yes 1   Protest Demonstrative protests (legal and nonviolent)           1   Political   National    City    Khuzestan   GONGO   Progovernment   Conservative    National    Khuzestan   unknown Streets Khuzestan

Answer 1

• 你没有提供样本数据，所以我合成了一些
• 在 callback 中就像使用 start_date 和 end_date 过滤数据框一样简单

import pandas as pd
import numpy as np
import dash
import plotly.express as px
from dash.dependencies import Input, Output, State
from jupyter_dash import JupyterDash

# generate some sample data...
df = pd.DataFrame(
    {
        "date_x": pd.date_range("1-jan-2021", periods=200),
        "y": np.linspace(30, 50, 200) * np.random.uniform(0.95, 1.05, 200),
    }
)

app = JupyterDash(__name__)
app.layout = dash.html.Div(
    [
        dash.dcc.DatePickerRange(
            id="date_filter",
            start_date=df["date_x"].min(),
            end_date=df["date_x"].max(),
            min_date_allowed=df["date_x"].min(),
            max_date_allowed=df["date_x"].max(),
        ),
        dash.dcc.Graph(id="graph"),
    ]
)


@app.callback(
    Output("graph", "figure"),
    Input("date_filter", "start_date"),
    Input("date_filter", "end_date"),
)
def updateGraph(start_date, end_date):
    if not start_date or not end_date:
        raise dash.exceptions.PreventUpdate
    else:
        return px.line(
            df.loc[
                df["date_x"].between(
                    pd.to_datetime(start_date), pd.to_datetime(end_date)
                )
            ],
            x="date_x",
            y="y",
        )


# Run app and display result inline in the notebook
app.run_server(mode="inline")