Plot.ly: логика для одного графика, управляемая несколькими выпадающими

Question

В приведенном ниже коде Plot.ly через Python API я показываю одно из значений cos (x) / cos (2x) / sin (x) / sin (2x) на основе выбора в раскрывающемся меню.Я хотел бы изменить его так, чтобы было два выпадающих меню: одно для выбора cos / sin и другое для выбора x / 2x.Уже есть второе пустое выпадающее меню, идентичное первому только для презентаций.

Может ли Plot.ly сделать это?Пока что мне известно только о редактировании того, что видно с помощью тега visible в словаре кнопок, который принимает статический список, поэтому я не уверен, что логика представления достаточна.

Plot.lyграфик здесь:

https://plot.ly/~cnmartinez11/58/cos1x/#/

Код (запускаемый в блокноте Jupyter):

import plotly
import plotly.plotly as py
import plotly.graph_objs as go
plotly.offline.init_notebook_mode(connected=True)
import numpy as np

xx = np.linspace(0, 10, 100)
funcs = [np.cos, np.sin]
omegas = [1, 2]
buttons = []
data = []
n_plots = len(funcs)*len(omegas)
visible = [False] * n_plots

cnt = 0
for func in funcs:
    for omega in omegas:

        name = '{}({}x)'.format(func.__name__, omega)
        visible_current = visible.copy()
        visible_current[cnt] = True

        buttons.append(
            dict(
                label = name,
                method = 'update',
                args = [
                    {'visible': visible_current},
                    {'title': name}
                ]
            )
        )

        trace = go.Scatter(
            x = xx,
            y = func(omega*xx),
            visible = True if cnt == 0 else False,
            name = name
        )
        data.append(trace)

        cnt = cnt + 1

updatemenus = [dict(buttons = buttons), dict(buttons = buttons, y = 0.75)]
layout = dict(title='cos(1x)', updatemenus = updatemenus, hovermode = 'closest')
fig = dict(data = data, layout = layout)
# py.iplot(fig)
plotly.offline.iplot(fig)

Answer 1

В конце концов я предположил, что это невозможно в чистом сюжете.В Dash все достаточно просто.

app = dash.Dash()

func_map = {'cos': np.cos, 'sin': np.sin, None: np.cos}

app.layout = html.Div([
    html.Div(
        [
            dcc.Dropdown(
                id='function-select',
                options=[{'label': 'cos', 'value': 'cos'}, {'label': 'sin', 'value': 'sin'}],
                value='cos'
            )
        ],
        style={'width': '20%', 'display': 'inline-block'}
    ),
    html.Div(
        [
            dcc.Dropdown(
                id='arg-select',
                options=[{'label': 'x', 'value': 1}, {'label': '2x', 'value': 2}],
                value=1
            )
        ],
        style={'width': '20%', 'display': 'inline-block'}
    ),
    dcc.Graph(id='sinusoid-graph')
])

@app.callback(
    dash.dependencies.Output('sinusoid-graph', 'figure'),
    [
        dash.dependencies.Input('function-select', 'value'),
        dash.dependencies.Input('arg-select', 'value')
    ]
)
def update_graph(func_name, omega):
    func = func_map[func_name]
    xx = np.linspace(0, 10, 100)
    yy = func(omega*xx)

    data = [go.Scatter(x = xx, y = yy)]
    layout = go.Layout(
        title = '{}({}x)'.format(func_name, omega),
        hovermode = 'closest'
    )

    return {'data': data, 'layout': layout}