格式之间的编织图

Question

I使用单选按钮在两个绘图格式之间进行切换。 让我们称这两个选项为“ A”和“ B.”

当选择“ A”选项时，我想使用Bootstrap Row/Col.

并排绘制两个数字。 选择选项“ B”时，我想将整列用于单个图形。

问题是，使用我的代码（下图），当我从“ A”转换为“ B”并返回“ A”时，两个数字垂直显示出来。

import dash
from dash import dcc, html, Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objs as go


app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(
    children=html.Div(children=[
        dcc.RadioItems(id='radio', options=('a', 'b'), value='a', inline=True),
        dbc.Row(id='row')
    ])
)


@app.callback(
    Output("row", "children"),
    [Input("radio", "value")],
)
def fill_row(radio):
    f1 = go.Figure()
    f2 = go.Figure()
    f3 = go.Figure()

    if radio == 'a':
        return [
            dbc.Col(dcc.Graph(figure=f1)),
            dbc.Col(dcc.Graph(figure=f2)),
        ]
    else:
        return [
            dbc.Col(dcc.Graph(figure=f3)),
        ]


if __name__ == "__main__":
    app.run_server(debug=True, port=8051)

屏幕截图是：

填充一个组件的组件的默认行为是水平对齐，因此我可以在这里看到混乱。但是，列组件的默认

size

Answer 1

dbc.Col

。或其他数字不超过

dbc.Row

：

：

solution

width = 6

below是测试运行中的几张图像。您会在答案的末尾找到一个完整的代码段

输出1：

return

输出2：

12

输出1：

@app.callback(
    Output("row", "children"),
    [Input("radio", "value")],
)
def fill_row(radio):
    f1 = go.Figure()
    f2 = go.Figure()
    f3 = go.Figure()

    if radio == "a":
        return [
            dbc.Col([dcc.Graph(figure=f1)], width=6),
            dbc.Col([dcc.Graph(figure=f2)], width=6),
        ]
    else:
        return [
            dbc.Col(dcc.Graph(figure=f3), width=12),
        ]

再次

complete代码： radio = a