Plot.ly：由多个下拉菜单控制的一个图表的逻辑答案

【问题标题】：Plot.ly: Logic for one graph controlled by multiple dropdownsPlot.ly：由多个下拉菜单控制的一个图表的逻辑
【发布时间】：2018-10-30 00:45:56
【问题描述】：

在下面通过 Python API 的 Plot.ly 代码中，我根据下拉菜单中的选择显示了 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)

【问题讨论】：

标签： python plotly

【解决方案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}

【讨论】：