Plotly Dash 回调输出图形数组到布局中的单个 Div？

Question

我想在我的 Dash 布局中创建多个相似的直方图，并将单个回调输出到单个 div，而不是重复复制和粘贴代码。下面是我当前代码的示例：

# In app.layout
html.Div([
    html.H3('Plots'),
    html.Div(dcc.Graph(id='A')),
    html.Div(dcc.Graph(id='B')),
    html.Div(dcc.Graph(id='C'))
])

# Callback
@app.callback(
    [Output('A', 'figure'),
     Output('B', 'figure'),
     Output('C', 'figure')]
    [Input('filtered-data-hidden', 'children')]
)
def plot_data(df):
    dff = pd.read_json(df, orient='split')
    figure_a = px.histogram(dff, x="A", nbins=20)
    figure_b = px.histogram(dff, x="B", nbins=20)
    figure_c = px.histogram(dff, x="C", nbins=20)
    return figure_a, figure_b, figure_c

我尝试了以下方法：

# In app.layout
html.Div([
    html.H3('Plots'),
    html.Div(dcc.Graph(id='figures'))
])

# Callback
@app.callback(
    Output('figures', 'figure'),
    [Input('filtered-data-hidden', 'children')]
)
def plot_data(df):
    dff = pd.read_json(df, orient='split')
    figures = []
    for feature in FEATURES.keys():
        figures.append(px.histogram(dff, x=features, nbins=20))
    return figures

但是出现错误：

Invalid argument `figure` passed into Graph with ID "figures".
Expected `object`.
Was supplied type `array`.

Answer 1

您在问题中遗漏了一些实施细节，因此我将在此处提供更一般的示例以突出您可以采用的方法。

一个想法是根据您的键动态创建元素列表，如下所示：

graphs_from_keys = [dcc.Graph(id=key) for key in keys]
outputs_from_keys = [Output(key, "figure") for key in keys]
figures_from_keys = [px.histogram(df, x=key, nbins=20) for key in keys]

这允许我们将 graphs_from_keys 列表中的每个图形传递给布局，如下所示：

app.layout = html.Div(
    [
        html.H3("Plots"),
        *graphs_from_keys,
        # ...
    ]
)

然后回调看起来像这样：

@app.callback(
    outputs_from_keys,
    [Input('filtered-data-hidden', 'children')],
)
def plot_data(df):
    # ...
    return figures_from_keys

Plotly Dash 回调输出图形数组到布局中的单个 Div？

Plotly Dash callback output array of graphs to a single Div in layout?

python

python-3.x

plotly-dash