使用單選按鈕切換繪圖會破壞格式

Question

我正在嘗試做一些相對簡單的事情。 我想創建一個在兩種繪圖格式之間切換的單選按鈕。 單選按鈕在兩個選項之間切換。 讓我們稱它們為“a”和“b”。

When 'a' is selected, I want to plot two figures side by side using bootstrap row/col. 選擇選項“b”時，我想將整個列用於單個圖形。

我相信我在下面正確編碼，但是當我從“a”切換到“b”並返回到“a”時，plot 搞砸了 plot，兩個數字垂直顯示。

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)

以下是截圖：

Answer 1

填充dbc.Row組件的dbc.Col組件的默認行為是水平 alignment，所以我可以在這里看到混亂。 但是，列組件的默認大小是 12。如果您嘗試將該大小的兩個組件彼此相鄰放置，則會導致溢出，並且列將彼此堆疊在頂部。 因此，一個可能的解決方案是為您的第一個return語句中的列設置width = 6 。 或其他不超過12的數字：

解決方案

@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),
        ]

下面是一些測試運行的圖像。 您將在答案末尾找到完整的代碼段

Output 1： radio = a

Output 2： radio = b

Output 1： radio = 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)], width=),
            dbc.Col([dcc.Graph(figure=f2)], width=6),
        ]
    else:
        return [
            dbc.Col(dcc.Graph(figure=f3), width=12),
        ]


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