Plotly Dashboard：如何制作一个简单的下拉菜单来显示数字？

Posted 2023-03-22

【中文标题】Plotly Dashboard：如何制作一个简单的下拉菜单来显示数字？

【英文标题】：Plotly Dashboard: How to make a simple dropdown to display figures?

【发布时间】：2022-01-13 06:02:45

【问题描述】：

我的数据保存在字典中，并且可以访问，但我不知道该放什么选项和价值。

app = JupyterDash(__name__)
app.layout = html.Div([
    dcc.Dropdown(
        id='launch-data',
        options=[
            "label":"All","value":"launch_tot_fig"],
            value=launch_tot_fig
            ),
        

    html.Div(id="dd-output-container")]
    )

@app.callback(Output('dd-output-container', 'children'),Input('launch-data', 'value'))
def update_output(value):
    return 'You have selected ""'.format(value)
if __name__ == '__main__':
    app.run_server(debug = True)

我还有一个图 launch_tot_fig，它是发射场的饼图。这就是在输入为“All”时显示。

The Dictionary is launchmass with the SPACEX launchsites as keys

【参考方案1】：

如果你想显示一个图表，你需要在你的布局中添加一个图表组件，然后使用回调来更新它给定下拉值。你应该有这样的东西：

app.layout = html.Div([
    dcc.Dropdown(
        id='launch-data',
        options=[
            "label": "All", "value": "launch_tot_fig", "label": "Other", "value": "Other"],
        value="Other"
    ),

    html.Div(id="dd-output-container"),
    
    dcc.Graph(id='my-fig')

]
)

回调应该是这样的：

@app.callback(Output('my-fig', 'figure'),
              Input('launch-data', 'value'))
def update_output(value):

    fig = px.bar()

    if value == 'launch_tot_fig':
        fig = dictionnary_with_graphs['launch_tot_fig']

    return fig