在 Python Dash 中使用滑块更新多个绘图

Question

我对 Dash（以及有关 Python 的基本技能水平）相当陌生，并且正在出于教育目的开发仪表板。 学生应能够通过滑块更改各种变量。经济模型的变化应在所示的几张图中可见。 我能够创建一个基本示例，其中一个图由多个滑块提供。 但是，我希望一些滑块同时影响多个绘图。

到目前为止，我想出了以下内容：

import dash
from dash import dcc 
import dash_html_components as html
from dash.dependencies import Input, Output

import pandas as pd

import plotly.graph_objects as go
from jupyter_dash import JupyterDash

app = dash.Dash(__name__)

a = 1
b = 1
c = 1

d = {
    'x' : [1, 2, 3, 4],
    'y1': [i * a for i in [1, 2, 3, 4]], 
    'y2': [i * b for i in [1, 2, 3, 4]],
    'y3': [i * c for i in [1, 2, 3, 4]]
    }

df = pd.DataFrame(data = d)


fig1 = go.Figure()

    fig.add_trace(go.Line(name="y1", x=df['x'], y=df['y1']))
    fig.add_trace(go.Line(name="y2", x=df['x'], y=df['y2']))
    fig.update_layout(
        transition_duration=500,
        xaxis_title="x",
        yaxis_title="y"
        )
    fig.update_yaxes(range = [0,20])
    fig.update_xaxes(range = [0,6])

fig2 = go.Figure()

    fig.add_trace(go.Line(name="y1", x=df['x'], y=df['y1']))
    fig.update_layout(
        transition_duration=500,
        xaxis_title="x",
        yaxis_title="y"
        )
    fig.update_yaxes(range = [0,20])
    fig.update_xaxes(range = [0,6])

fig3 = go.Figure()

    fig.add_trace(go.Line(name="y2", x=df['x'], y=df['y2']))
    fig.add_trace(go.Line(name="y3", x=df['x'], y=df['y3']))
    fig.update_layout(
        transition_duration=500,
        xaxis_title="x",
        yaxis_title="y"
        )
    fig.update_yaxes(range = [0,20])
    fig.update_xaxes(range = [0,6])

app.layout = html.Div(children=[
    html.Div([
        html.Div([
            html.Div(children='''
                Market A
            '''),

            dcc.Graph(
                id='graph1',
                figure=fig1
            ),  
        ], className='col'),
        html.Div([
            html.Div(children='''
                Market B
            '''),

            dcc.Graph(
                id='graph2',
                figure=fig2
            ),  
        ], className='col'),
    ], className='row'),
    # New Div for all elements in the new 'row' of the page
    html.Div([
        html.Div(children='''
            Market C
        '''),

        dcc.Graph(
            id='graph3',
            figure=fig3
        ),
        dcc.Slider(
            0,
            10,
            step=None,
            value=a,
            id='a'
        ),
        dcc.Slider(
                0,
                10,
                step=None,
                value=b,
                id='b'
            ),
        dcc.Slider(
                0,
                10,
                step=None,
                value=c,
                id='c'
            ),
    ], className='row'),
])

@app.callback(
    [Output('graph1', 'figure'),
    Output('graph2', 'figure'),
    Output('graph3', 'figure')],
    [Input('a', 'value'),        # first slider
    Input('b', 'value')],        # second slider 
    Input('c', 'value'))         # third slider

def update_figure_money_market(a, b, c):
    a = a
    b = b
    c = c
    d = {
        'x' : [1, 2, 3, 4],
        'y1': [i * a for i in [1, 2, 3, 4]], 
        'y2': [i * b for i in [1, 2, 3, 4]],
        'y3': [i * c for i in [1, 2, 3, 4]]
        }
    df = pd.DataFrame(data = d)

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

到目前为止我还没有在互联网上找到合适的方法。

任何提示将不胜感激。

Answer 1

每个图表都需要自己的回调，然后是图表的更新函数，以便 dash 生成多个响应图。

# input and update of graph 1
@app.callback(
    Output('graph1', 'figure'),
    [Input('slider1', 'value'),
    Input('slider2', 'value')]
) 
def update_graph1(slider1, slider2):
    X = np.array(range(1,1001,1))
    Y = X * slider1
    Y2 = X * slider2
    d = {'X': X, 'Y': Y, 'Y2': Y2}
    df = pd.DataFrame(data = d)
    fig = go.Figure()
    fig.add_trace(go.Line(name="Y", x=df['X'], y=df['Y']))
    fig.add_trace(go.Line(name="Y2", x=df['X'],
        y=df['Y2']))
    fig.update_layout(
        transition_duration=500,
        xaxis_title="X",
        yaxis_title="Y"
        )
    return fig
  
# input and update of second plot
@app.callback(
    Output('graph2', 'figure'),
    Input('slider2', 'value')
) 
def update_graph2(slider2):
    X = np.array(range(1,1001,1))
    Y = X**0.5 * slider2
    d = {'X': X, 'Y': Y}
    df = pd.DataFrame(data = d)
    fig = go.Figure()
    fig.add_trace(go.Line(name="Y", x=df['X'], y=df['Y']))
    fig.update_layout(
        transition_duration=500,
        xaxis_title="X",
        yaxis_title="Y"
        )
    return fig

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