带图的破折号日期选择器

Question

我正在尝试将一个图形连接到一个日期选择器。然而，在尝试连接图形和日期选择器时，我一直遇到一个问题。我有以下代码：

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from datetime import datetime
import plotly.graph_objs as go
import plotly.express as px

controls = dbc.FormGroup(
    [
        html.P('Pick Date', style={
            'textAlign': 'center'
        }),
        dcc.DatePickerRange(
            id = "date-picker",
            start_date = datetime(2021,1,1),
            end_date = datetime.today(),
            display_format='MMMM Y, DD'
        ),

        html.Br(),
        dbc.Button(
            id='submit_button',
            n_clicks=0,
            children='Submit',
            color='primary',
            block=True
        ),
    ]
)

content_second_row = dbc.Row(
    [

        dbc.Col(
            dcc.Graph(id='graph_2'), md=4
        )
    ]
)

@app.callback(
    Output('graph_2', 'figure'),
    [Input('date-picker', 'start_date'),
    Input('date-picker', 'end_date')],
    [State('submit_button', 'n_clicks')])
def update_graph_2(n_clicks, start_date, end_date):
    fig = {
        'data': [{
            'x':  dfEconomic[(dfEconomic['Date']>start_date)&(dfEconomic['Date']<end_date)],
            'y': dfEconomic["Amount [DKK]"],
            'type': 'bar'
        }]
    }

    return fig

我尝试使用以下代码将日期值转换为日期框：

for i in range(len(dfEconomic["Date"])):
    if isinstance(dfEconomic["Date"][i], str) == True:
        dfEconomic["Date"] =  datetime.strptime(dfEconomic["Date"][i], "%Y-%m-%d")

但这无助于形势的发展。我收到以下错误消息：

TypeError: invalid type comparison

有人能帮我理解什么需要改变吗

The dataframe looks the following

Answer 1

• 模拟数据帧并构建一个破折号布局，使代码可以运行
• 三个核心问题
  1. 回调的参数顺序错误n_单击是最后一个参数
  2. 使用pd.to_datetime()将字符串值转换为datetime64[ns]。创建了一个列表，可以用作*args到between()
  3. 需要过滤x和y以便使用局部变量df

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from datetime import datetime
import plotly.graph_objs as go
import plotly.express as px
import pandas as pd
import numpy as np
from jupyter_dash import JupyterDash

app = JupyterDash(__name__)

dfEconomic = pd.DataFrame({"Date": pd.date_range("1-jan-2021", "today")}).assign(
    **{"Amount [DKK]": lambda d: np.random.uniform(10, 200, len(d))}
)

controls = dbc.FormGroup(
    [
        html.P("Pick Date", style={"textAlign": "center"}),
        dcc.DatePickerRange(
            id="date-picker",
            start_date=datetime(2021, 1, 1),
            end_date=datetime.today(),
            display_format="MMMM Y, DD",
        ),
        html.Br(),
        dbc.Button(
            id="submit_button",
            n_clicks=0,
            children="Submit",
            color="primary",
            block=True,
        ),
    ]
)

content_second_row = dbc.Row([dbc.Col(dcc.Graph(id="graph_2"), md=4)])

app.layout = html.Div([controls, content_second_row])


@app.callback(
    Output("graph_2", "figure"),
    [Input("date-picker", "start_date"), Input("date-picker", "end_date")],
    [State("submit_button", "n_clicks")],
)
def update_graph_2(start_date, end_date, n_clicks):
    df = dfEconomic.loc[dfEconomic["Date"].between(*pd.to_datetime([start_date, end_date]))]
    fig = {"data": [{"x": df["Date"], "y": df["Amount [DKK]"], "type": "bar"}]}

    return fig


if __name__ == "__main__":
    #     app.run_server(debug=True)
    app.run_server(mode="inline")