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

基础概念

Plotly Dash 是一个用于构建 Web 应用程序的 Python 框架，特别适用于数据可视化。Dash 允许你使用纯 Python 代码创建交互式图表和 Web 应用程序。回调（Callbacks）是 Dash 的核心功能之一，用于处理用户输入并更新应用程序的输出。

类型

Dash 回调可以是单个输出或多个输出的回调。单个输出回调将结果更新到一个特定的组件，而多个输出回调可以同时更新多个组件。

应用场景

Dash 适用于各种数据可视化应用，如仪表板、报告生成器、实时数据分析工具等。

问题描述

你希望将多个图形的 Plotly Dash 回调数组输出到布局中的单个 Div。

解决方案

以下是一个示例代码，展示如何将多个图形的回调数组输出到单个 Div：

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objs as go

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'Line', 'value': 'line'},
            {'label': 'Bar', 'value': 'bar'},
            {'label': 'Scatter', 'value': 'scatter'}
        ],
        value='line'
    ),
    html.Div(id='graphs')
])

@app.callback(
    Output('graphs', 'children'),
    [Input('dropdown', 'value')]
)
def update_graphs(selected_chart):
    if selected_chart == 'line':
        fig1 = go.Figure(data=[go.Scatter(x=[1, 2, 3], y=[4, 5, 6])])
        fig2 = go.Figure(data=[go.Scatter(x=[1, 2, 3], y=[6, 5, 4])])
    elif selected_chart == 'bar':
        fig1 = go.Figure(data=[go.Bar(x=[1, 2, 3], y=[4, 5, 6])])
        fig2 = go.Figure(data=[go.Bar(x=[1, 2, 3], y=[6, 5, 4])])
    elif selected_chart == 'scatter':
        fig1 = go.Figure(data=[go.Scatter(x=[1, 2, 3], y=[4, 5, 6], mode='markers')])
        fig2 = go.Figure(data=[go.Scatter(x=[1, 2, 3], y=[6, 5, 4], mode='markers')])
    
    return [
        dcc.Graph(figure=fig1),
        dcc.Graph(figure=fig2)
    ]

if __name__ == '__main__':
    app.run_server(debug=True)