Plotly:如何使用下拉菜单选择图形源? [英] Plotly: How to select graph source using dropdown?

问题描述

我正在尝试使用 Plotly 将多个可选择的图形嵌入到单个图形中，并使用下拉图形.我遵循了 Plotly 的

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

解决方案

使用 graph_objects 更新答案:

截至

<小时>

一些细节:

不出所料，

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

设置 'y' = values_1 与将 单个 列表分配给 'y' 相同.但是 'y' 在 updatemenus 中不接受单个列表作为参数，而是像 'y' = [values_1].为什么?因为您可能希望在同一图中绘制多个列表，例如 'y' = [values_1, values_1b].看看:

下拉选项变量 1 的绘图:

下拉选项 Var 2 的绘图

完整的原始代码:

plotly 导入from plotly import graph_objs as go, offline as po, toolspo.init_notebook_mode()将 numpy 导入为 np导入jsonx = 列表(np.linspace(-np.pi，np.pi，100))values_1 = 列表(np.sin(x))values_1b = [elem*-1 对于 values_1 中的 elem]values_2 = 列表(np.tan(x))values_2b = [elem*-1 for elem in values_2]行 = go.Scatter(x=x,y=values_1)line2 = go.Scatter(x=x,y=values_1b)更新菜单 = [{'纽扣': [{'方法':'重新设计'，'label': 'Val 1','参数':[{'y': [values_1, values_1b]},]},{'方法':'重新设计'，'标签':'Val 2'，'参数':[{'y': [values_2, values_2b]},]}],'方向':'向下'，'showactive':真的，}]布局 = go.Layout(更新菜单=更新菜单，)图 = go.Figure(data=[line, line2], layout=layout)po.iplot(图)

完整的更新代码:

# 导入导入 plotly.graph_objects as go将 numpy 导入为 np# 数据x = 列表(np.linspace(-np.pi，np.pi，100))values_1 = 列表(np.sin(x))values_1b = [elem*-1 对于 values_1 中的 elem]values_2 = 列表(np.tan(x))values_2b = [elem*-1 for elem in values_2]# 情节设置]fig = go.Figure()# 添加一个或多个跟踪fig.add_traces(go.Scatter(x=x, y=values_1))fig.add_traces(go.Scatter(x=x, y=values_1b))# 构造菜单updatemenus = [{'buttons': [{'method': 'update','label': 'Val 1','args': [{'y': [values_1, values_1b]},]},{'方法':'更新'，'标签':'Val 2'，'args': [{'y': [values_2, values_2b]},]}],'方向':'向下'，'showactive': 真,}]# 用按钮更新布局，并显示图形fig.update_layout(updatemenus=updatemenus)图.show()

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

I'm trying to embed multiple, selectable graphs in a single figure using Plotly, using a dropdown figure. I followed the dropdown example from Plotly, but they only show how to change graph characteristics (like visible, or type), not the underlying data. In my situation, I have a static X-axis and want to change the Y-values. Here's a minimal working example that can be run in a 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)

However, while the approach seems to work like advertised for general graph attributes (like 'visible'), when I use 'y', it produces a straight line, where y goes from 0 to len(y), instead of the actual data I gave it. Here are images of the initial render, and then what happens when I select the dropdown item for the Tan(X) graph, then go back to the Sin(X):

How do I embed the data for multiple graphs into a single figure so that the user can select which one they want to view?

解决方案

Updated answer using graph_objects:

As of 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 at the end. The solution to the question as it still stands will still be the same, namely:

---

'y' in updatemenus does not take a single list as an argument, but rather a list of lists like in 'y' = [values_1] where values_1 is a list in itself. So just replace your lines

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

with

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

to get these plots for the different options Val 1 and Val 2:

---

---

Some Details:

Values_1 is, unsurprisingly, a list of length 100 where each element is of type numpy.float. Replacing json.dumps(values_1) with values_1, and json.dumps(values_2) with values_2 will render the same plots as in your question. The reason why these plots are just straight lines, seems to be that it's the length of your lists that are being plotted, and not the values contained in that list. Or something to that effect.

Setting 'y' = values_1 is the same thing as assigning a single list to 'y'. But 'y' in updatemenus does not take a single list as an argument, but rather a list of lists like in 'y' = [values_1]. Why? Because you might want to plot multiple lists in the same figure like 'y' = [values_1, values_1b]. Have a look:

Plot for dropdown option Var 1:

Plot for dropdown option Var 2

Complete original code:

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)

Complete updated code:

# 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()

Plot with version 4 default layout:

这篇关于Plotly:如何使用下拉菜单选择图形源?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！