用1行破折号绘制2张图表时出错

Question

我正在尝试构建一个仪表板，它显示了同一行的两个图表。我使用dbc.Row和dbc.Col来划分部分，但我不确定代码有什么问题，因为图表是在彼此之上显示，而不是并排显示。我尝试过添加style={"width": "45%", "margin-top": "1%","margin-left": "0%", "margin-right": "0%"}，与第二个图表相反，但仍然只是在不同的行上显示图表。

html.Div([
    dbc.Row([
        dbc.Col(
            html.Div([
                dcc.Dropdown(id='dropdown-1', multi=True, value=('EC'),
                             options=[{'label': x, 'value': x}
                                      for x in sorted(dfdate['Campaign'].unique())]),
                dcc.Graph(id='date-graph', figure=fig_cpa_date),
            ]), width={'size': 3}
        ),
        dbc.Col(
            html.Div([
                dcc.Dropdown(id='dropdown-2', multi=True, value=('EC'), style={"margin-top": "1%"},
                             options=[{'label': x, 'value': x}
                                      for x in sorted(dfdate['Campaign'].unique())]),
                dcc.Graph(id='spend-graph', figure=fig_spend),
            ]), width={'size': 3}
        ),
    ]),
])

Answer 1

尝试这样做，只为Col的html.Div([])更改children[]：

dbc.Row([
    dbc.Col(
        children=[
                    dcc.Dropdown(id='dropdown-1', multi=True, value = ('EC'),
                    options= [{'label': x, 'value': x} 
                    for x in sorted (dfdate['Campaign'].unique())]),
                    dcc.Graph(id='date-graph', figure=fig_cpa_date),
                ], width=3
            ),
    dbc.Col(
        children=[
                    dcc.Dropdown(id='dropdown-2', multi=True, value=('EC'), style={"margin-top": "1%"},
                    options=[{'label': x, 'value': x}
                    for x in sorted(dfdate['Campaign'].unique())]),
                    dcc.Graph(id='spend-graph', figure=fig_spend),
                ], width=3
            ),
        ]),