我的仪表板应用程序具有以下轮廓：
home = [
#KPI
html.Div(
id="one",
className="row",
children=[
html.P("Dash")
]
),
html.Div(
className ="row",
children=[
html.Div(style={"display": "inline-block"},
children="Select a Data Source",
className="title is-5"
),
dcc.Dropdown(
id='dataSource_dropdown',
options=[
{'label': 'x', 'value': 'x'},
{'label': 'y', 'value': 'y'}
],
multi=False,
value="x",
placeholder="Select a Data Source",
clearable=False,
searchable=False
)
]
)
]
primaryResearch = [
dcc.RadioItems(
id="radioSelection",
style={
"float": "left",
"padding-left": 50,
},
options=[
{"label": "1", "value": 1},
{"label": "2", "value": 2},
{"label": "3", "value": 3}
],
value=1
)]
'''
~~~~~~~~~~~~~~~~
~~ APP LAYOUT ~~
~~~~~~~~~~~~~~~~
'''
app = dash.Dash(__name__, external_stylesheets ["https://codepen.io/chriddyp/pen/bWLwgP.css"])
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
app.layout = html.Div(
className="container",
children = [
# facilitate multi-page app
dcc.Location(id="url", refresh=True),
# header
html.Div(
id="header",
className="row",
style={
'background-color': 'rgb(10, 187, 189)'
},
children=[
html.Div([
html.H1(
style={"display": "inline-block",
"float":"right"},
children="360 Dashbaord"
)
]
)
]
),
html.Br(),
html.Div(
id="div_graphs",
children=dcc.Graph(
style={'display': 'none'}
)
),
html.Div(
className ="row",
children=[
html.Div(style={"display": "inline-block"},
children="Select a Data Source",
className="title is-5"
)
# **************Not Able to find the following id*************
# dcc.Dropdown(
# id='dataSource_dropdown',
# options=[
# {'label': 'x', 'value': 'x'},
# {'label': 'y Repository', 'value': 'y'}
# ],
# multi=False,
# value="x",
# placeholder="Select a Data Source",
# clearable=False,
# searchable=False
# )
]
),
# buttons to pages
html.Div(
className="row",
style={"margin-bottom": "20",
"margin-right":"50"},
children=[
dcc.Link(
id="home-button",
className="button",
href="/home",
children="Home"
),
dcc.Link(
id="primary-Research-button",
className="button",
href="/primaryResearch",
children="Primary Research"
)
]
),
html.Br(),
# container for page content
html.Div(
id="page-content",
className="row"
)
]
)
@app.callback(Output("page-content", "children"),
[Input("url", "pathname")])
def show_page(pathname):
if (pathname == "/home") or (pathname == "/"):
return home
if pathname == "/primaryResearch":
return primaryResearch
@app.callback(Output("div_graphs", "children"),
[Input("dataSource_dropdown", "value")])
def update_graph(dropdown_value):
if dropdown_value == 'y' :
return [
html.Div(
className='three columns',
style={
'min-width': '24.5%',
'height': 'calc(100vh - 90px)',
'margin-top': '5px',
# Remove possibility to select the text for better UX
'user-select': 'none',
'-moz-user-select': 'none',
'-webkit-user-select': 'none',
'-ms-user-select': 'none'
},
children=[
html.H1("X")
])
]
现在的问题是，在尝试访问列表中的组件时，出现以下异常：
NonExistentIdException
Attempting to assign a callback to the component with the id "dataSource_dropdown" but no components with id "dataSource_dropdown" exist in the app's layout.
如果我在列表之外定义了此组件，即作为应用布局的一部分，我可以找到并访问它，但是我需要在应用程序的不同视图上进行定义。对为什么会发生这种情况有任何想法吗？
此外，我发现一个类似的框架在here下工作，所以不知道我的代码有什么问题。