我正在尝试更改 Dash 应用程序的布局答案

【问题标题】：I am trying to alter the layout of a Dash app我正在尝试更改 Dash 应用程序的布局
【发布时间】：2021-06-28 08:13:17
【问题描述】：

我正在尝试更改我的 Dash 应用程序的布局，我想要两行，其中第一行有两列，左列有所有下拉列表和单选项目，第二列有“fig2”。然后第 2 行是带有“fig1”的单列我已经编写了 bdc 行和 col 脚本，但似乎我需要一个“子”函数。搜索后，我仍然无法正确编码“儿童”功能。任何人都可以提供任何建议或帮助我吗？

    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)

【问题讨论】：

TypeError：dash_html_components.Div 组件（版本 1.1.3），ID 为“Dropdown(id='Continent1', options=[{'label': 'World', 'value': '全部'}, {'label': 'Asia', 'value': 'asia'}, {'label': 'Africa', 'value': 'africa'}, {'label': 'Europe', '价值'：'欧洲'}，{'标签'：'北美'，'价值'：'北美'}，{'标签'：'南美'，'价值'：'南美'}]，价值='All')" 检测到除 children 以外的道具的组件您是否忘记将多个 children 包装在一个数组中？ Prop n_clicks_timestamp 的值为 Label('Data Input')
我运行代码时得到的错误标志在上面

标签： python plotly-dash

【解决方案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.Div 的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。

【讨论】：