[英]How to make Dash dropdown options depend upon another DCC inputs selection
Lets say I have some code as follows below:可以说我有一些代码如下:
import pandas as pd
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import helper
from datetime import date
app = dash.Dash(__name__)
# import data
app.layout = html.Div(children=[
dcc.Dropdown(
id='slct_dataset',
options= ['dataset1', 'dataset2'],
placeholder="Select a dataset",
multi=False,
style={'width': '40%'}
),
dcc.DatePickerRange(
id='slct_date',
#todo make: below below depend upon dataset selection
min_date_allowed=date(1980, 1, 1),
max_date_allowed=date(2021, 1, 1),
initial_visible_month=date(2017, 8, 5),
end_date=date(2017, 8, 25)
),
html.Div(id='output_container', children=[], style={
'textAlign': 'center'
}),
html.Br(),
dcc.Graph(id='my_graph', figure={})
])
#callback to produce graph
@app.callback(
[
Output(component_id='output_container', component_property='children'),
Output(component_id='my_series_graph', component_property='figure')
],
[
Input(component_id='slct_dataset', component_property='value'),
Input(component_id='slct_date', component_property='start_date'),
Input(component_id='slct_date', component_property='end_date')
]
)
def update_graph(dataset_slctd, start_date_slctd, end_date_slctd):
container = 'Dataset: {}'.format(dataset_slctd) +\
'. Start date: {}'.format(start_date_slctd) + \
'. End date: {}'.format(end_date_slctd)
dff = helper.get_dataset(dataset_slctd, start_date_slctd, end_date_slctd)
dff['Datetime'] = dff.index
fig = px.line(dff, x='Datetime', y='Value', title=dataset_slctd)
return container, fig
if __name__ == '__main__':
app.run_server(debug=False)
Right now I have min and max date allowed hard coded as this min_date_allowed=date(1980, 1, 1)
in date picker range.现在,我在日期选择器范围内将允许的最小和最大日期硬编码为
min_date_allowed=date(1980, 1, 1)
。 How can I define a date range dynamically based on the selection of a dataset in the first dropdown?如何根据第一个下拉列表中的数据集选择动态定义日期范围? Eg.
例如。 lets say I have 01-01-2000/01-01-2001 as my min/max dataset for dataset1, and I have 02-02-2000/02-02-2001 as my min/max daterange for dataset2.
假设我有 01-01-2000/01-01-2001 作为我的数据集 1 的最小/最大数据集,我有 02-02-2000/02-02-2001 作为我的数据集 2 的最小/最大日期范围。 How can I make my datepickerrange dynamically update based on whether I select dataset1 or dataset2 in my slct_dataset dropdown?
如何根据 slct_dataset 下拉列表中的 select dataset1 或 dataset2 使我的 datepickerrange 动态更新? As I understand this might depend on using a callback, but I can't really find what the standard way to do this is.
据我了解,这可能取决于使用回调,但我无法真正找到执行此操作的标准方法。 Let me know if any more information can make the question more clear- I basically took the code I am actually writing and simplified it as much as possible so hopefully its clear what Im trying to do here.
让我知道是否有更多信息可以使问题更清楚 - 我基本上采用了我实际编写的代码并尽可能简化它,所以希望它清楚我在这里试图做什么。 thanks for the help.
谢谢您的帮助。
You can take the dropdown as an input to a callback and output to the date ranges of the datepicker based on the selected value.您可以将下拉列表作为回调的输入,并将 output 作为基于所选值的日期选择器的日期范围的输入。 The signature should look like this:
签名应如下所示:
@app.callback(
[
Output(component_id='slct_date', component_property='min_date_allowed'),
Output(component_id='slct_date', component_property='max_date_allowed'),
],
[
Input(component_id='slct_dataset', component_property='value'),
]
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.