Question

我正在尝试实现一个实时更新图表，该图表仅在用户从下拉菜单中选择时才会显示。我已经使用来自“间隔”和下拉菜单“氧气”的输入进行了回调。我想如果“value”为“0”，则没有选择图表，我可以返回“null”（???），如果“value”=“1”，则图表会更新。这可能吗？还是我的方法不正确？

dcc.Graph(id='live-graph2', animate=False),
        dcc.Interval(
            id='graph-update',
            interval=10000,
            n_intervals=0
        )),
        dbc.Col(html.Div([
        dcc.Dropdown(
            id='oxygen',
            options=[{'label': s, 'value': s}
                     for s in main_graph.keys()],
            value=[],
            multi=True),

@app.callback(
    dash.dependencies.Output('live-graph2', 'figure'),
    [dash.dependencies.Input('oxygen', 'value'),
     dash.dependencies.Input('graph-update', 'n_intervals')],
)
def update_graph_scatter_2(n,value):
    if value == 0:
        ....
    else:
        data = {}

Answer 1

我会以不同的方式解决这个问题。

如果您在未选择任何下拉选项时根本不想显示图表，则默认情况下不需要 Graph 组件位于布局中。

相反，您可以创建一个容器组件，您的 Graph 组件会根据您的 Dropdown 组件的选项值动态附加到该容器组件中。

以下是使用示例数据的简化示例，请根据您的要求进行调整：

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.express as px
import dash_bootstrap_components as dbc

df = px.data.iris()

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dcc.Interval(id="graph-update", interval=10000, n_intervals=0),
        html.Div(id="graph-container"),
        dbc.Col(
            html.Div(
                [
                    dcc.Dropdown(
                        id="oxygen",
                        options=[{"label": s, "value": s} for s in [1, 2, 3]],
                        value=[],
                        multi=True,
                    )
                ]
            )
        ),
    ]
)


@app.callback(
    dash.dependencies.Output("graph-container", "children"),
    [
        dash.dependencies.Input("oxygen", "value"),
        dash.dependencies.Input("graph-update", "n_intervals"),
    ],
)
def update_graph_scatter_2(value, n):
    if value:
        # Change the line below to dynamically create the figure based on value
        fig = px.scatter(df, x="sepal_width", y="sepal_length")
        return dcc.Graph(id="live-graph2", figure=fig)

    return html.Div()

破折号下拉菜单图

1 个答案: