我正在尝试更改达世币应用程序的布局

Question

我正在尝试更改Dash应用程序的布局，我想要两行，第一行有两列，左列有所有下拉菜单和单选项，第二列有"fig2"。然后第2行是带有"fig1"的单列。我已经对bdc行和col脚本进行了编码，但似乎我需要一个"children"函数。经过搜索，我仍然无法正确编码"Children"函数。有人能给我建议或帮助我吗？

app = dash.Dash()
app.layout = html.Div([
dbc.Row([
dbc.Col(html.Div(

html.Label("Scope"),

dcc.Dropdown(id="Continent1", options=[{'label': 'World', 'value': 'All'},
{'label': 'Asia', 'value': 'asia'},
{'label': 'Africa', 'value': 'africa'},
{'label': 'Europe', 'value': 'europe'},
{'label': 'North America', 'value': 'north america'},
{'label': 'South America', 'value': 'south america'}], value='All'),

html.Br(),html.Label("Data Input"),

dcc.RadioItems(id="Data1", options=[{'label': 'Confirmed Cases', 'value': 'ConfirmedCases'},
{'label': 'Confirmed Deaths', 'value': 'ConfirmedDeaths'},
{'label': 'Stringency Index', 'value': 'StringencyIndex'}], value='Confirmed Cases'), 

html.Br(),html.Label("Policy"),
dcc.RadioItems(id="Policy1", options=[{'label': 'Not selected', 'value': 'All'},
{'label': 'Staying at home', 'value': 'Stay at home requirements'},
{'label': 'School closing', 'value': 'School closing'}], value='All'), width=4)),

dbc.Col(html.Div(
dcc.Graph(id="fig2",figure=line), width=4)),

dbc.Row(
dbc.Col(html.Div(
dcc.Graph(id="fig1",figure=geo))))])])
app.run_server(debug=True, use_reloader=False) 

Answer 1

html.Div大致具有以下签名：

html.Div(children, id, **kwargs)

这里的children可以是单个组件(来自html或dcc(，也可以是组件列表。

这是使用html.Div(向单个下拉列表添加样式(的有效方法：

# Explicit
my_div = html.Div(children=dcc.Dropdown(...), id='my-div', style={'height': ...})
# implicitly:
my_div = html.Div(dcc.Dropdown(...), "my-div", style={'height': ...})

这是将多个组件分配为html的children的有效方法。分区：

my_div = html.Div(id="my-div", children=[
dcc.Dropdown(...),
html.Hr(),
dcc.Slider(...)
])

然而，如果你试图插入多个组件，你的应用程序就会崩溃：

html.Div(
dcc.Dropdown(...),
html.Hr(),
dcc.Slider(...)
)

这是因为Dash会认为您试图将组件分配给位置参数(即children、id、n_clicks等(，但无法正确创建html.Div。