情节：如何使用下拉菜单选择图形源？

Question

我正在尝试使用Plotly和下拉图将多个可选图形嵌入单个图。我遵循了Plotly中的下拉示例，但它们仅显示了如何更改图形特征（如可见或类型），而不显示基础数据。在我的情况下，我有一个固定的X轴，并且想要更改Y值。这是一个可以在jupyter笔记本中运行的最小工作示例：

import plotly
from plotly import graph_objs as go, offline as po, tools
po.init_notebook_mode()

import numpy as np
import json

x = list(np.linspace(-np.pi, np.pi, 100))
values_1 = list(np.sin(x))
values_2 = list(np.tan(x))

line = go.Scatter(
    x=x,
    y=values_1
)

updatemenus = [
    {
        'buttons': [
            {
                'method': 'restyle',
                'label': 'Val 1',
                'args': [
                    {'y': json.dumps(values_1)},
                ]
            },
            {
                'method': 'restyle',
                'label': 'Val 2',
                'args': [
                    {'y': json.dumps(values_2)},
                ]
            }
        ],
        'direction': 'down',
        'showactive': True,
    }
]

layout = go.Layout(
    updatemenus=updatemenus,
)

figure = go.Figure(data=[line], layout=layout)

po.iplot(figure)

但是，虽然该方法似乎像一般图形属性所宣传的那样工作（例如“ visible”），但是当我使用“ y”时，它会产生一条直线，其中y从0到len（y），而不是实际数据我给了 这是初始渲染的图像，然后当我为Tan（X）图选择下拉项然后返回到Sin（X）时会发生什么：

如何将多个图形的数​​据嵌入到单个图形中，以便用户可以选择要查看的图形？

Answer 1

使用 graph_objects 更新答案：

从版本 4 开始，您不必担心离线与在线功能。所以去掉from plotly import graph_objs as go, offline as poand po.init_notebook_mode()，直接使用import plotly.graph_objects as go. 我已经用完整的代码片段更新了我的原始答案，该代码片段在最后使用plotly.graph_objects显示了具有多个跟踪的整个方法。问题的解决方案仍然存在，即：

'y'inupdatemenus不接受单个列表作为参数，而是一个列表列表，例如'y' = [values_1]wherevalues_1本身就是一个列表。所以只需更换你的线条

• {'y': json.dumps(values_1)}, 和 {'y': json.dumps(values_2)},

和

• {'y': [values_1]}, 和 {'y': [values_2]},

获取不同选项的这些图，Val 1并且Val 2：

一些细节：

Values_1不出所料，这是一个长度为 100 的列表，其中每个元素的类型为 numpy.float。替换json.dumps(values_1)为values_1, 和json.dumps(values_2)withvalues_2将呈现与您的问题相同的图。这些图只是直线的原因似乎是正在绘制的列表的长度，而不是该列表中包含的值。或者类似的东西。

设置'y' = values_1与将单个列表分配给'y'. 但是'y'inupdatemenus不会将单个列表作为参数，而是将列表作为 in 之类的列表'y' = [values_1]。为什么？因为您可能希望在同一个图中绘制多个列表，例如'y' = [values_1, values_1b]. 看一看：

下拉选项 Var 1 的绘图：

下拉选项 Var 2 的绘图

完整的原始代码：

import plotly
from plotly import graph_objs as go, offline as po, tools
po.init_notebook_mode()

import numpy as np
import json

x = list(np.linspace(-np.pi, np.pi, 100))
values_1 = list(np.sin(x))
values_1b = [elem*-1 for elem in values_1]

values_2 = list(np.tan(x))
values_2b = [elem*-1 for elem in values_2]


line = go.Scatter(
    x=x,
    y=values_1
)

line2 = go.Scatter(
    x=x,
    y=values_1b
)


updatemenus = [
    {
        'buttons': [
            {
                'method': 'restyle',
                'label': 'Val 1',
                'args': [
                    {'y': [values_1, values_1b]},
                ]
            },
            {
                'method': 'restyle',
                'label': 'Val 2',
                'args': [
                    {'y': [values_2, values_2b]},
                ]
            }
        ],
        'direction': 'down',
        'showactive': True,
    }
]

layout = go.Layout(
    updatemenus=updatemenus,
)

figure = go.Figure(data=[line, line2], layout=layout)
po.iplot(figure)

完整的更新代码：

# imports
import plotly.graph_objects as go
import numpy as np

# data
x = list(np.linspace(-np.pi, np.pi, 100))
values_1 = list(np.sin(x))
values_1b = [elem*-1 for elem in values_1]
values_2 = list(np.tan(x))
values_2b = [elem*-1 for elem in values_2]

# plotly setup]
fig = go.Figure()

# Add one ore more traces
fig.add_traces(go.Scatter(x=x, y=values_1))
fig.add_traces(go.Scatter(x=x, y=values_1b))

# construct menus
updatemenus = [{'buttons': [{'method': 'update',
                             'label': 'Val 1',
                             'args': [{'y': [values_1, values_1b]},]
                              },
                            {'method': 'update',
                             'label': 'Val 2',
                             'args': [{'y': [values_2, values_2b]},]}],
                'direction': 'down',
                'showactive': True,}]

# update layout with buttons, and show the figure
fig.update_layout(updatemenus=updatemenus)
fig.show()

使用版本 4 默认布局绘图：