Plotly 交互式可视化下拉菜单

Question

我正在尝试创建一个 plotly dash 下拉菜单，其选择用于过滤数据框并从过滤后的数据框生成饼图。我从 plotly interactive visualizations documentation and as carefully as possible went through and deleted all the extra. (all I want is one drop-down and one output graph as per ).

的工作代码开始

现在我将坚持第一个想到的与代码 @app.callback 部分的逻辑相关的问题。

@app.callback(
Output('indicator-graphic', 'figure'),
[Input('choose_species', 'value')])

输入标签是有意义的，因为上面有一个下拉列表，其中 id 和 value 等于 Input:

的参数

html.Div([
        dcc.Dropdown(
            id='choose_species',
            options=[{'label': i, 'value': i} for i in available_indicators],
            value='Pacific Water Shrew'
        )

然而，虽然输出有一个相关的 id:

dcc.Graph(id='indicator-graphic')

代码中没有其他文本 figure，我认为它必须来自示例代码中调用的函数 update_graph 的输出。在我自己的代码（这显然不起作用）和示例代码（这确实让我惊讶，因为我不知道如何工作）中都没有提到图形。

问题：

鉴于以上情况，我如何将 @app_callback 绑定到我的 update-graph 函数。请记住，我对所有涉及的编码语言都很陌生。

感谢阅读这个冗长的问题。

Answer 1

figure 是 Graph 的一部分，您可以在开始时将值赋给 figure - 就像这样

import dash
from dash import html, dcc

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(figure={
                  'data': [{
                        'x': [1,2,3],
                        'y': [1,7,4],
                  }],
              }
    ),
])        

app.run_server()

但你也可以定义 Graph 为空 figure

import dash
from dash import html, dcc

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(),
])        

app.run_server()

您稍后可能会尝试将一些值分配给 figure。

这就是带有 callback 的代码所做的。

它使用 id 访问 Graph 并分配给 figure 从 callback 返回的值。

当页面加载时，它会创建 Dropdown（使用 id='choose_species'）并将 'Pacific Water Shrew' 分配给 value，然后执行 callback 使用 [Input('choose_species', 'value')] returns 字典和回调将其分配给 Graph 中的 figure 和 id='indicator-graphic'

@ in @app.callback 意味着它是装饰器，你必须将你的函数直接放在 decorat 下才能将它分配给这个装饰器——或者更确切地说，用这个函数作为参数来执行这个装饰器。

import dash
from dash import html, dcc, Output, Input

# --- data ---

my_data = {
    'Hello': {'x':[1,2,3], 'y': [1,7,4]},
    'World': {'x':[1,2,3], 'y': [7,1,4]},
    'Pacific Water Shrew': {'x':[1,2,3], 'y': [7,4,1]}
}

available_indicators = list(my_data.keys())

# --- HTML ---

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(
        id='choose_species',
        options=[{'label': i, 'value': i} for i in available_indicators],
        value='Pacific Water Shrew'
    ),

    dcc.Graph(id='indicator-graphic'),
])        

# --- code ---

@app.callback(
Output('indicator-graphic', 'figure'),
[Input('choose_species', 'value')])
def update_graph(arg):
    print('value from dropdown:', arg)
    
    my_x = my_data[arg]['x']
    my_y = my_data[arg]['y']
    
    return {
        'data': [dict(
            x=my_x,
            y=my_y,
        )],
    }

app.run_server()

Answer 2

根据我的经验，您可以执行以下操作：

app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])

app.layout = html.Div([html.H5('Drop Down',className='text-center'),
            dcc.Dropdown(
            id='choose_species',
            options=[{'label': i, 'value': i} for i in available_indicators],
                value='Pacific Water Shrew',
                multi=True,
                disabled=False,
                clearable=True,
                searchable=True),
            dcc.Graph(id='indicator-graphic',figure={},style={'height':300,'width':'auto'})
])

@app.callback(Output('indicator-graphic', 'figure'),
             [Input('choose_species', 'value')])

def build_graph(species): 
    fig = px.line(df,x='',y='',color='')
    return fig

if __name__ == "__main__":
    app.run_server(debug=False

)

您需要在您的布局中添加dcc.Graph和figure={}，并且在@app.callback下您必须添加一个功能到return figure 过滤后通过 dropdown.

Plotly 交互式可视化下拉菜单

Plotly interactive visualizations dropdown

python

plotly

hyphen

python-interactive