Plotly:如何使用下拉列表 select 图源?

Plotly: How to select graph source using dropdown?

我正在尝试使用 Plotly 将多个 select 可用的图形嵌入到一个图形中,使用下拉图形。我遵循了 Plotly 的 dropdown example,但它们只展示了如何更改图形特征(如可见或类型),而不是底层数据。在我的情况下,我有一个静态 X 轴并想更改 Y 值。这是一个可以在 jupyter notebook 中 运行 的最小工作示例:

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),而不是我给它的实际数据。这是初始渲染的图像,然后当我 select Tan(X) 图的下拉项,然后返回到 Sin(X):

时会发生什么

如何将多个图表的数据嵌入到一个图表中,以便用户可以select他们想查看哪一个图表?

使用 graph_objects 更新了答案:

截至 version 4, you don't have to worry about offline versus online functionality. So drop the from plotly import graph_objs as go, offline as po and po.init_notebook_mode(), and just use import plotly.graph_objects as go. I've updated my original answer with a complete code snippet that shows the whole approach with multiple traces using plotly.graph_objects 最后。问题的解决方案仍然是相同的,即:


updatemenus 中的

'y' 不将单个列表作为参数,而是 列表列表 就像在 'y' = [values_1] 中一样,其中 values_1 本身就是一个列表。所以只需替换你的行

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

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

获取不同选项的这些图 Val 1Val 2:



一些细节:

不出所料,

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

设置 'y' = values_1 与将 单个 列表分配给 'y' 相同。但是 updatemenus 中的 'y' 并没有将单个列表作为参数,而是像 '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 默认布局绘制: