Python Dash 中的多下拉列表错误

Question

我试图在 Python Dash 中嵌入的交互式折线图中可视化不同金融指数（A、B、C）的价格发展。我想允许用户 select 多个指数，并在特定时间段内在同一图中相应地比较它们。同时，当unselecting indices时，plot也应该相应变化。到目前为止，我只能绘制一个索引。我现在遇到的问题是，在添加额外索引时，情节根本没有改变。在过去的几个小时里，我试图自己解决这个问题，但不幸的是没有成功。

我正在使用 Jupyter 笔记本。这是我的代码和数据示例：

import pandas as pd
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import plotly.express as px

data = [['2020-01-31', 100, 100, 100], ['2020-02-28', 101, 107, 99], ['2020-03-31', 104, 109, 193], ['2020-04-30', 112, 115, 94], ['2020-05-31', 112, 120, 189]]
df = pd.DataFrame(data, columns = ['DATE', 'A', 'B', 'C'])
df = df.set_index('DATE')
df

# create the Dash app
app = dash.Dash()

# set up app layout
app.layout = html.Div(children=[
    html.H1(children='Index Dashboard'),
    dcc.Dropdown(id='index-dropdown',
                options=[{'label': x, 'value': x}
                        for x in df.columns],
                 value='A',
                 multi=True, clearable=True),
    dcc.Graph(id='price-graph')
])

# set up the callback function
@app.callback(
    Output(component_id='price-graph', component_property='figure'),
    [Input(component_id='index-dropdown', component_property='value')]
)

def display_time_series(selected_index):
    filtered_index = [df.columns == selected_index]
    fig = px.line(df, x=df.index, y=selected_index,
                 labels={'x', 'x axis label'})
    
    fig.update_layout(
        title="Price Index Development",
        xaxis_title="Month",
        yaxis_title="Price",
        font=dict(size=13))
    
    return fig

# Run local server
if __name__ == '__main__':
    app.run_server(debug=True, use_reloader=False)

由于我对 Python Dash 比较陌生，非常感谢任何帮助或建议！

Answer 1

您没有在回调中将过滤器应用到您的数据，过滤器本身不起作用。

相反，您可以这样做：

@app.callback(
    Output(component_id="price-graph", component_property="figure"),
    [Input(component_id="index-dropdown", component_property="value")],
)
def display_time_series(selected_index):
    dff = df[selected_index] # Only use columns selected in dropdown
    fig = px.line(dff, x=df.index, y=selected_index, labels={"x", "x axis label"})

    fig.update_layout(
        title="Price Index Development",
        xaxis_title="Month",
        yaxis_title="Price",
        font=dict(size=13),
    )

    return fig

Python Dash 中的多下拉列表错误

Error with Multi Dropdown List in Python Dash

python

dropdownbox

jupyter-notebook

plotly-dash